1

我已经能够使用按钮（图像映射器）设置地图坐标，但是当我加载新图像时无法重新绑定到新坐标。

我有一个图像和映射，然后我用一个按钮更改图像。我还想更改映射坐标并为不同的图像显示不同的映射。任何帮助都会很棒谢谢 

    <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>
4

1 回答 1

0

所以基本上你需要为不同的图像使用不同的地图，并为不同的图像使用不同的 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);


});
于 2015-01-09T20:52:32.593 回答