0

好的，我有 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 会发生变化id"person-2-slide-1"

我问的是鼠标悬停图像映射是否有 javascript，更改 div 以便图片更改。

4

1 回答 1

0

为每个区域添加一个属性，指定应该更改哪个 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();
});
于 2013-05-16T08:42:35.793 回答