J'essaie de redimensionner une carte d'image sur l'événement de redimensionnement de la fenêtre. Le plus proche que j'ai obtenu est d'utiliser un événement de Mouseclick, mais il doit être une fenêtre de redimensionnement pour ce que je fais. J'utilise Firefox 3.5.5
J'utilise un peu de jQuery. Voici mon exemple - le bouton Zone que je souhaite redimensionner sur la fenêtre Redimensionner est en haut à gauche (cliquez dessus pour redimensionner le bouton de la carte et de la zone):
http://www.whitebrickstudios.com/foghornstour/imagemap3.html < / p>
Toute aide serait appréciée! Merci, Rich
8 Réponses :
Appeler une fonction Lorsque la fenêtre est redimensionnée, essayez ce qui suit:
scaleXY('theMap',$(window).width());
Bien que vous parliez la vérité, l'OP le fait déjà si vous avez pris la peine de lire le code.
Cela fonctionne donc, mais je dois redimensionner Firefox 6 fois pour que cela fonctionne. C'est-à-dire est un gâchis. J'ai fait ces changements. C'est utile, mais cela ressemble à Firefox et en particulier, c'est-à-dire avoir trop de problèmes de redimensionnement. Je pense maintenant que je vais rester avec mon plan original et je n'utilise que des divs placés de semi-précoce pour prendre la place des boutons de carte image. Mince. Je penserai à cela cependant et si je monte jamais avec et je répondrai, je le posterai. Merci pour votre aide les gars.
J'avais déjà "dérangé" de lire le code; Cependant, la question elle-même n'a pas précisé que cette partie de la solution n'était pas le problème. J'ai ajouté la gestion des événements de base du redimensionnement pour ceux qui pourraient le trouver plus tard lors de la recherche d'une solution. La seconde moitié de ma question a résolu l'un des problèmes avec le code, donc je ne suis pas sûr pourquoi je devrais recevoir un vote.
Si vous n'avez besoin que de redimensionner l'image, utilisez cette technique: http://www.cssplay.co.uk/layouts/background.html
Merci à CSSPLAY.
Je pense que vous manquez le point DANIGB. Je cherche à redimensionner une "zone de carte d'image", sur la fenêtre de fenêtre.
Maintenant, je comprends. En fait, j'ai ouvert votre URL et cela ne fonctionnait pas pour moi (Chrome). Je devais faire quelque chose de similaire et j'ai fini d'utiliser des divs au lieu d'imagemaps et de régler la position: Absolute; et haut, gauche, largeur et hauteur en% d'unités. Si vous ce que je peux expliquer un peu plus. Bravo Dani
Hey Danigb, j'ai fini par utiliser des divs aussi pour positionner des images avec% s. Bien que ce soit toujours cool d'utiliser des cartes d'image dans une version future. C'est ce que j'ai pour les cartes d'image jusqu'à présent. home.comCast.net/ ~urbanjost/img/reesizeimg4.html
Woops, destiné à utiliser ce lien: whitebrickstudios.com/foghornstour/imagemap3.html
Je pense que ce que vous voulez est à http://home.comcast.net/~urbanjost/semaphore.html << / p>
où je montre différents exemples de comment faire de vos coordonnées de la carte d'image Modifier lorsque votre image affiche la taille des modifications.
J'ai effectivement incorporé une partie du code dans ces exemples. Le problème que j'ai rencontré, c'est que si la carte de l'image redimensionnait des événements comme "Cliquez sur", il ne s'ajusterait pas sur "Fenêtre redimensionner" événement .-- Eh bien, il suffit de redimensionner le navigateur 6 fois pour obtenir Pour travailler. J'utilise FF 3.5 Désolé, mon lien est allé cassé, il est réparé maintenant: whitebrickstudios.com/foghornstour/ Imagemap3.html J'ai choisi d'utiliser des divs positionnés par% s, mais ce serait vraiment cool pour que cela fonctionne un jour.
Ceci est un vieux fil, mais pour toute personne recherchant une solution pour un problème similaire ou même identique, le imagEMAPSTER < / a> JQuery Plugin semble fournir la solution la plus facile. Vous pouvez utiliser sa méthode de redimensionnement (qui peut même animer le redimensionnement si vous le souhaitez!) Comme suit pour redimensionner une image avec sa carte d'image: Vous pouvez trouver un lien sur La démo de l'imagemapster à une page jsfiddle démontre le redimensionnement une image et sa carte en réponse à la modification de la fenêtre du navigateur.
J'ai écrit une fonction simple pour reconstruire tous les points de carte sur chaque événement. Essayez ceci
function mapRebuild(scaleValue) {
var map = $("#imgmap"); // select your map or for all map you can choose $("map").each(function() { map = $(this);.....})
map.find("area").each(function() { // select all areas
var coords = $(this).attr("coords"); // extract coords
coords = coords.split(","); // split to array
var scaledCoords = "";
for (var coord in coords) { // rebuild all coords with scaleValue
scaledCoords += Math.floor(coords[coord] * scaleValue) + ",";
}
scaledCoords = scaledCoords.slice(0, -1); // last coma delete
$(this).attr("coords", scaledCoords); // set new coords
});
}
+1 J'utilise cette fonction, fonctionne comme un charme. Mais j'ai utilisé img.width / img.naturalwidth au lieu d'utiliser la largeur de la fenêtre. De cette façon, je n'avais pas besoin de prendre des frontières supplémentaires, des marges, des prélèvements, etc. en compte.
J'ai étendu cela dans un peu de libérés, qui conserve la carte fonctionne car l'image est redimensionnée et aboutit également à X et Y ayant une mise à l'échelle différente. Il travaille également sur les valeurs de mise à l'échelle pour vous. Github.com/davidjbradshaw/imagemap-Resizer
En tant que version modifiée de la réponse de Viktor, cette version peut gérer plusieurs redimensions. Il stocke des valeurs initiales à comparer contre tout redimensionnement futur. Cela utilise également waitforFinalEvent Donc, il ne fonctionne pas et sur le redimensionnement.
Voici une solution qui n'utilise pas jQuery.
Premier, construire une fonction de bibliothèque: puis, appelez la fonction de redimensionnement lorsque la page est initialement chargée. et quand il est redimensionné: remplacez 500 avec quelle que soit la taille de votre carte par défaut
Un échantillon de béton pour calculer les coordonnées de la carte de l'image Lorsque la fenêtre est chargée ou redimensionnée:
Cette image est 1930 * 3360: et ajoutez le script après le corps Comme:
Vous avez une faute de frappe dans
ImagemapResize peut-être. Vous ditesScalexy ('themap' quand je pense que vous voulez direscalexy ('myImage' ?Github.com/davidjbradshaw/Image-Map-Resizer