Javascript图像映射，更改div答案

【问题标题】：Javascript image map, change divJavascript图像映射，更改div
【发布时间】：2013-05-16 08:37:42
【问题描述】：

好的，我有 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 id"person-2-slide-1" 中显示 img /p>

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

【问题讨论】：

您的 html 包含错误。确保在尝试任何操作之前修复它们。

标签： javascript jquery html imagemap

【解决方案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();
});

【讨论】：