Question

好的我有5张图片地图，

<map name="Map" id="Map">
    <area id="Frame1" shape="poly" coords="549,225,687,234,682,373,543,366" href="#" alt="Frame 1" />
    <area id="Frame2" shape="poly" coords="702,219,705,354,841,347,833,213" href="#" alt="Frame 2" />
    <area id"Frame3" shape="poly" coords="482,376,476,510,624,515,627,383" href="#" alt="Frame 3" />
    <area id"Frame4" shape="poly" coords="653,540,646,404,748,403,755,537" href="#" alt="Frame 4" />
    <area id"Frame5" shape="poly" coords="764,513,882,515,885,370,764,368" href="#" alt="Frame 5" />
</map>

和一些单独的div

<div id="person-1-slide-1"><img src ="images/allnewpictures/3.png" /></div>
<div id="person-2-slide-1"><img src = "images/allnewpictures/2.png" /></div>
<div id="person-3-slide-1"><img src ="images/allnewpictures/1.png"/></div>

当我将鼠标悬停在其中一个图像地图区域上时，div会改变，因此将鼠标悬停在图像地图1上，更改div“person-1-slide-1”以显示div {{1}中的img }

我要求的是鼠标悬停图片地图的javascript，更改div以便图片更改。

Answer 1

为每个区域添加一个属性，指定应更改哪个div：

<map name="Map" id="Map"> 
      <area id="Frame1" data-ref="person-1-slide-1" shape="poly" coords="549,225,687,234,682,373,543,366" href="#" alt="Frame 1" />
      <area id="Frame2" data-ref="person-2-slide-1" shape="poly" coords="702,219,705,354,841,347,833,213" href="#" alt="Frame 2" />
      <area id"Frame3" data-ref="person-3-slide-1" shape="poly" coords="482,376,476,510,624,515,627,383" href="#" alt="Frame 3" />
      <area id"Frame4" data-ref="person-4-slide-1" shape="poly" coords="653,540,646,404,748,403,755,537" href="#" alt="Frame 4" />
      <area id"Frame5" data-ref="person-5-slide-1" shape="poly" coords="764,513,882,515,885,370,764,368" href="#" alt="Frame 5" />
</map>

然后试试这个：

$('map area').hover(function() {
    $('#'+$(this).data('ref')).find('img').show();
},
function() {
    $('#'+$(this).data('ref')).find('img').hide();
});

Javascript图像映射，更改div

1 个答案: