Redimensionner la carte d'image sur le redimensionnement de la fenêtre

J'ai écrit une fonction simple pour reconstruire tous les points de carte sur chaque événement. Essaye ça

 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 }); } 

ScaleValue peut être calculé comme oldWindowWidth / newWindowWidth. Bien sûr, vous devez garder la valeur de oldWindowWidth lors du redimensionnement des fenêtres. Peut-être que ma solution n'est pas à l'heure, mais j'espère que cela est utile à quelqu'un

Je pense que ce que vous voulez est à http://home.comcast.net/~urbanjost/semaphore.html

Où je montre différents exemples de la façon dont les coordonnées de ma carte d'image changent lorsque la taille de l'affichage de votre image change.

Il s'agit d'un fil ancien, mais pour ceux qui recherchent une solution pour un problème similaire ou même identique, le plugin jQuery d' ImageMapster semble fournir la solution la plus simple. Vous pouvez utiliser sa méthode de redimensionnement (qui peut même animer le redimensionnement si désiré!) Comme suit pour redimensionner une image avec sa carte d'image:

 $('img').mapster( 'resize', newWidth, newHeight, resizeTime); 

Vous pouvez trouver un lien sur la page de démonstration d'ImageMapster vers un jsFiddle qui démontre le redimensionnement d' une image et sa carte en réponse à la modification de la fenêtre du navigateur.

En tant que version modifiée de la réponse de Viktor, cette version peut gérer plusieurs redimensionnement. Il stocke les valeurs initiales pour la comparaison contre tout redimensionnement futur. Cela utilise également waitForFinalEvent pour qu'il ne se déplace pas encore et encore au redimensionnement.

 var mapImg = $('#mapImg'); var naturalWidth = 1200; // set manually to avoid ie8 issues var baseAreas = new Array(); var scaleValue = mapImg.width() / naturalWidth; $(window).resize( function() { waitForFinalEvent( function() { scaleValue = mapImg.width() / naturalWidth; mapRebuild( scaleValue ); }, 500, 'resize-window'); }); function mapRebuild( scaleValue ) { var map = $("#imgMap"); var mapareas = map.find( 'area' ); if ( baseAreas.length == 0 ) { mapareas.each( function() { baseAreas.push( $(this).attr( 'coords' ) ); // set initial values }); } mapareas.each( function( index ) { var coords = baseAreas[index]; // use the corresponding base coordinates coords = coords.split( ',' ); var scaledCoords = ''; for ( var coord in coords ) { scaledCoords += Math.floor( coords[coord] * scaleValue ) + ','; } scaledCoords = scaledCoords.slice( 0, -1 ); $(this).attr( 'coords', scaledCoords ); }); } mapRebuild( scaleValue ); // initial scale 

Pour appeler une fonction lorsque la fenêtre est redimensionnée, essayez ce qui suit:

 $(window).bind('resize', function() { // resize the button here }); 

En outre, la ligne 37 manque un signe dollar:

 scaleXY('theMap',(window).width()); 

CA devrait etre:

 scaleXY('theMap',$(window).width()); 

Si vous avez seulement besoin de redimensionner l'image, utilisez cette technique: http://www.cssplay.co.uk/layouts/background.html

Merci à CSSPlay.