ImageMapster - 在文本链接悬停时显示图像地图区域

【问题标题】：ImageMapster - show image map area on text link hoverImageMapster - 在文本链接悬停时显示图像地图区域
【发布时间】：2013-01-30 07:56:50
【问题描述】：

我有一个使用 ImageMapster.js 的带有悬停效果的图像映射...图像旁边是一个文本链接列表，它们引用图像映射区域的某些区域。当我将鼠标悬停在文本链接上时，是否可以突出显示图像地图区域？

例如：

<img src="map.png" usemap="#ch" style="width:100%;">
<map id="usa_image_map" name="usa>
<area href="http://ab.com" state="ab" shape="poly" coords="259,256,275,257,..."><area href="http://xy.com" state="xy" shape="poly" coords="332,421,329,416,...">
</map>
<div id="links">
<a href="http://ab.com">ab</a><a href="http://xy.com">xy</a>

【问题讨论】：

标签： hyperlink hover imagemap imagemapster

【解决方案1】：

试试这个：

    $("a", "#links").hover(
      function () {
        var state = $( this ).text();
        $( 'area[state="' + state +'"]').mapster('select');

    });

当您将链接列表悬停在id="links" 时，该事件会被激活。 var state 保存悬停链接的文本，因此当您悬停<a href="ab.com">ab</a> 时，状态为ab。使用选择器$('area[state="' + state +'"]')，您可以找到地图的区域元素，其状态属性等于悬停链接的文本。 mapster('select')终于高亮地图区域了。

【讨论】：