我已经能够使用按钮(图像映射器)设置 map 坐标，但在加载新图像时无法重新绑定(bind)到新坐标。
我有一张图像和映射，然后我用一个按钮更改图像。我还想更改映射坐标并为不同图像显示不同的映射。 任何帮助都会很棒，谢谢
<body>
<img src="images/line 1.jpg" id = "boxx" alt="boxx" name="boxx" width="800" height="435" usemap="#box" />
<map name="box" id ="box" >
<area id="A" shape="rect" state= "A" coords="68,133,187,302" href="#" />
<area id="B" shape="rect" state= "B" coords="192,160,360,311" href="#" />
<area id="C" shape="rect" state= "C" coords="324,120,467,271" href="#" />
<area id="D" shape="rect" state= "D" coords="474,122,595,241" href="#" />
<area id="E" shape="rect" state= "E" coords="597,119,766,240" href="#" />
<area id="F" shape="rect" state= "F" coords="437,278,805,367" href="#" />
<area id="G" shape="rect" state= "A" coords="29,318,799,336" href="#" />
<area id="H" shape="rect" state= "B" coords="30,338,799,356" href="#" />
<area id="I" shape="rect" state= "C" coords="30,358,804,376" href="#" />
<area id="J" shape="rect" state= "D" coords="31,376,798,395" href="#" />
<area id="K" shape="rect" state= "E" coords="31,394,798,412" href="#" />
<area id="L" shape="rect" state= "F" coords="31,413,796,434" href="#" />
</map>
<input name="new" id = "b" value = "b"type="button" onclick = "change(this);" />
<input name="ne" id = "c" value = "c"type="button" onclick = "change(this);" />
<script>
function change(bu)
{
var box1 = document.getElementById("A");
var box2 = document.getElementById("B");
var box3 = document.getElementById("C");
var box4 = document.getElementById("D");
var box5 = document.getElementById("E");
var box6 = document.getElementById("F");
var box7 = document.getElementById("G");
var box8 = document.getElementById("H");
var box9 = document.getElementById("I");
var box10 = document.getElementById("J");
var box11= document.getElementById("K");
var box12= document.getElementById("L");
if ((bu.value) == "c")
{
var img = document.getElementById("boxx");
img.src = "images/Line 3.jpg";
box1.coords ="143,127,200,251";
box2.coords ="202,127,329,252";
box3.coords ="330,127,450,252";
box4.coords ="453,125,717,253";
box5.coords ="727,126,831,244";
box6.coords ="454,256,717,284";
box7.coords ="26,330,732,352";
box8.coords ="31,353,734,371";
box9.coords ="26,376,731,394";
box10.coords ="34,396,740,415";
box11.coords ="23,287,728,307";
box12.coords ="32,417,735,436";
}
//var button = document.getElementById("b");
var bb = bu.value;
alert(bb);
var button1 = "#" + bb;
alert (button1);
//image1.mapster('unbind');
$(button1).bind('click',function()
{
var image1 = $('#boxx');
alert (A.coords);
alert (G.coords);
alert("unbind");
var options = {
mapKey: 'state',
fillColor: 'd42e16',
fillOpacity: 0.3
};
//image1.mapster(options);
image1.mapster('rebind',options);
});
}
</script>
最佳答案
所以基本上你需要为不同的图像使用不同的 map ，并为不同的图像使用不同的 DIV 标签。这就是我解决这个问题的方法。
<div id = "l1" style="position: absolute; z-index:100; visibility: hidden; left: 150px; top: 109px;"><img src="line1.jpg" id = "box1" alt="box1" name="box1" width="800" max-height:"100%" usemap="#map1" />
<map name="map1" id ="map1" >
<area id="A" shape="rect" state= "A" coords="143,135,202,265" href="#" />
<area id="B" shape="rect" state= "B" coords="205,136,343,267" href="#" />
<area id="C" shape="rect" state= "C" coords="346,136,472,265" href="#" />
<area id="D" shape="rect" state= "D" coords="475,136,593,269" href="#" />
<area id="E" shape="rect" state= "E" coords="596,137,716,266" href="#" />
<area id="F" shape="rect" state= "F" coords="594,266,715,300" href="#" />
<area id="G" shape="rect" state= "A" coords="34,352,796,372" href="#" />
<area id="H" shape="rect" state= "B" coords="34,373,795,396" href="#" />
<area id="I" shape="rect" state= "C" coords="34,396,797,437" href="#" />
<area id="J" shape="rect" state= "D" coords="34,439,796,462" href="#" />
<area id="K" shape="rect" state= "E" coords="33,466,795,574" href="#" />
<area id="L" shape="rect" state= "F" coords="32,578,796,627" href="#" />
</map>
</div>
<div id = "L2" style="position: absolute; z-index:100; visibility: hidden; left: 150px; top: 109px;">
<img src="line2.jpg" id = "box2" alt="box2" name="box2" width="800" max-height:"100%" usemap="#map2" />
<map name="map2" id ="map2" >
<area id="A" shape="rect" state2= "A" coords="143,135,202,265" href="#" />
<area id="B" shape="rect" state2= "B" coords="202,135,331,266" href="#" />
<area id="C" shape="rect" state2= "C" coords="332,135,453,266" href="#" />
<area id="D" shape="rect" state2= "D" coords="453,134,714,264" href="#" />
<area id="E" shape="rect" state2= "E" coords="799,135,968,256" href="#" />
<area id="F" shape="rect" state2= "F" coords="455,268,713,298" href="#" />
<area id="G" shape="rect" state2= "A" coords="34,349,796,369" href="#" />
<area id="H" shape="rect" state2= "B" coords="33,371,797,409" href="#" />
<area id="I" shape="rect" state2= "C" coords="32,411,797,429" href="#" />
<area id="J" shape="rect" state2= "D" coords="33,431,797,549" href="#" />
<area id="K" shape="rect" state2= "E" coords="1036,324,1803,342" href="#" />
<area id="L" shape="rect" state2= "F" coords="34,553,797,598" href="#" />
</map>
</div>
if ((buttons.value) == "Line1")
{
Hide();
L1.style.visibility = "visible";
$('#Line1').bind('click',function()
{
var img1 = $('#box1');
var options = {
mapKey: 'state',
fillColor: 'd42e16',
fillOpacity: 0.3
};
img1.mapster(options);
});
}
else if ((buttons.value) == "Line2")
{
Hide();
L2.style.visibility = "visible";
$('#Line2').bind('click',function()
{
var image2 = $('#box2');
var options = {
mapKey: 'state2',
fillColor: 'd42e16',
fillOpacity: 0.3
};
image2.mapster(options);
});
关于javascript - 图像映射器 'rebind' 不工作，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/27696140/