In meinem Code habe ich ein Bild innerhalb einer div, die Kartenbereiche hat, und abhängig von Variablen von URL übergeben möchte ich das Bild zunächst gezoomt auf die Fläche durch die Variable gegeben. Ich benutze Imagemap für interaktive Karten-Features, und während dieses JQuery-Plugin verfügt über eine Funktion zur Größenänderung, ändert es nur die Größe des Bildes von oben links. Ich möchte, dass das Bild an die Position des ausgewählten Bereichs angepasst wird, oder mit anderen Worten, den ursprünglichen Zoombereich.HTML Größe zuerst ändern und Position ändern
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Demo</title>
<script src="jquery.min.js"></script>
<script src="imagemapster.js"></script>
<style type="text/css">
</style>
</head>
<body>
<div style = "width:867px; height:1109px; border:0; overflow: auto; float:left;">
<img name="front" src="zoo.png" style="max-width:100%;" id="frontmap" usemap="#m_front" alt=""/>
</div>
<map name="m_front" id="m_front">
<area id = "1" shape="poly" coords="56,45,57,257,468,46" href="#" />
<area id = "2" shape="poly" coords="519,166,697,324,699,186" href="#" />
<area id = "3" shape="circle" coords="397,533,224" href="#" />
<area id = "4" shape="rect" coords="647,730,725,851" href="#" />
<area id = "5" shape="rect" coords="118,765,280,855" href="#" />
<area id = "6" shape="rect" coords="271,862,683,1031" href="#" />
</map>
<script>
var i = "1";
$(document).ready(function()
{
var image = $('#frontmap');
image.mapster
({
fillColor: '000000',
fillOpacity: 0.8,
staticState: false
});
});
</script>
</body>
</html>
Ich habe mit CSS nach Lösungen zu suchen versucht, aber die meisten von ihnen führen nicht, was ich wollte, und entweder das Bild oder abgeschnitten den Bereich neu positioniert. Irgendwelche Vorschläge, wie man das Bild anfänglich auf den Bereich zoomt, in dem es sein soll, und trotzdem den Rest des Bildes mit div-Schiebereglern anzeigen kann?