Cambiar el tamaño del mapa de imagen en el tamaño de la ventana

Question

Estoy tratando de cambiar el tamaño de un mapa de imagen en el evento de cambio de tamaño de la ventana. Lo más cercano que he conseguido es usar un evento de clic de mouse, pero tiene que ser de tamaño de ventana para lo que estoy haciendo. Estoy usando Firefox 3.5.5

Estoy usando algo de jquery. Aquí está mi ejemplo - el botón zona Quiero cambiar el tamaño de cambiar el tamaño de la ventana se encuentra en la parte superior izquierda (clic en él para cambiar el tamaño de mapa y área de botones):

http://www.whitebrickstudios.com/foghornstour/imagemap3.html

Cualquier ayuda se agradece! Gracias, Rich

Answer 1

Para llamar a una función cuando se cambia el tamaño de la ventana, pruebe lo siguiente:

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

Además, la línea 37 le falta un signo de dólar:

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

Debería ser:

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

Answer 2

Si solo tiene que cambiar el tamaño del im edad, utilice esta técnica: http://www.cssplay.co.uk/layouts/background.html

Gracias a CSSPlay.

Answer 3

Creo que lo que desea se encuentra en http://home.comcast.net/~urbanjost/semaphore.html

donde muestro diferentes ejemplos de cómo hacer su mapa de imagen coordina el cambio cuando la imagen cambia el tamaño de pantalla.

Answer 4

Este es un hilo antiguo pero para cualquiera que busque una solución para un problema similar o incluso idéntico, el plugin jQuery ImageMapster parece proporcionar la solución más fácil. Puede utilizar su método de cambio de tamaño (que incluso puede animar el cambio de tamaño, si lo desea!) De la siguiente manera para cambiar el tamaño de una imagen junto con su mapa de imagen:

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

puede encontrar un enlace en ImageMapster's demo página a un jsFiddle that demonstrates resizing una imagen & su mapa en respuesta a cambiar la ventana del navegador.

Answer 5

Escribí alguna función simple para reconstruir todos los puntos del mapa en cada evento. Pruebe esto

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 se puede calcular como oldWindowWidth/newWindowWidth. Por supuesto, debe mantener el valor de oldWindowWidth en el tamaño de la ventana. Tal vez mi solución no sea a tiempo, pero espero que esto sea útil para alguien

Answer 6

Como versión modificada de la respuesta de Viktor, esta versión puede manejar múltiples tamaños. Almacena valores iniciales para comparar con cualquier cambio de tamaño futuro. Esto también usa waitForFinalEvent para que no se ejecute una y otra vez al cambiar el tamaño.

    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