Größe der Imagemap bei Fenstergrößenänderung

Question

Ich versuche, eine Imagemap auf Fenstergrößenänderungsereignis zu ändern. Das nächste, was ich bekommen habe, ist ein Mausklick-Event, aber es muss Fenstergröße für das, was ich mache, sein. Ich benutze Firefox 3.5.5

Ich benutze jquery etwas. Hier ist mein Beispiel - der Bereich Taste I auf Fenster Größe ändern, um die Größe will in der oberen linken Seite (Klick auf dem Stadtplan und Knopf, um die Größe):

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

Jede mögliche Hilfe würde geschätzt! Danke, Rich-

Answer 1

eine Funktion aufzurufen, wenn das Fenster verkleinert wird, versuchen Sie Folgendes:

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

Auch Linie 37 ist ein Dollarzeichen fehlt:

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

Es sollte be:

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

Answer 2

Wenn Sie nur die Größe ändern müssen Alter, verwenden Sie diese Technik: http://www.cssplay.co.uk/layouts/background.html

Dank CSSPlay.

Answer 3

Ich denke, was Sie wollen, ist bei http://home.comcast.net/~urbanjost/semaphore.html

, wo ich verschiedene Beispiele zeigen, wie Ihr Bild Kartenkoordinaten ändern, wenn der Bildanzeigegröße Änderungen vorzunehmen.

Answer 4

Dies ist ein alter Thread, aber für alle, die nach einer Lösung für ein ähnliches oder sogar identisches Problem suchen, scheint die ImageMapster jQuery Plugin die einfachste Lösung zu bieten. Sie können seine Größe ändern Methode verwenden (was auch die Größe neu bestimmen animieren können, falls gewünscht!) Ein Bild, um die Größe zusammen mit seinem Bild Karte folgt:

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

Sie einen Link auf ImageMapster's demo Seite ein jsFiddle that demonstrates resizing ein Bild finden & seine Karte als Reaktion auf das Ändern des Browserfensters.

Answer 5

Ich schrieb eine einfache Funktion, um alle Kartenpunkte bei jedem Ereignis neu zu erstellen. Versuchen Sie dies

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 kann als oldWindowWidth/newWindowWidth berechnet werden. Natürlich müssen Sie den Wert von oldWindowWidth bei der Fenstergrößenanpassung beibehalten. Vielleicht meine Lösung nicht pünktlich, aber ich hoffe, dass dies für jemanden nützlich ist

Answer 6

Als eine modifizierte Version von Viktors Antwort kann diese Version mehrere Größenänderungen behandeln. Es speichert die Anfangswerte für den Vergleich mit zukünftigen Größenänderungen. Dies verwendet auch waitForFinalEvent, so dass es bei der Größenänderung nicht über und über läuft.

    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