将JQuery悬停与HTML图像映射一起使用

Question

我有一个复杂的背景图片，其中有很多小区域，需要滚动插图高亮显示，以及每个地方的附加文本显示和关联链接。最终插图使用z索引堆叠了几张具有透明度的静态图像，并且高光翻转插图需要显示在中间的“三明治”层之一中，以实现所需的效果。

在对块进行一些不成功的摆弄之后，我决定可以使用老式的图像映射来完成。我制作了具有四个几何形状轮廓的示意图测试图，并使用png翻转“填充”了它们。这个想法是将图像地图与底部背景层相关联，使用css {visibility：hidden}初始化所有翻转，并使用Jquery的悬停方法使其可见，并在单独的div中显示相关文本。单独的文本函数是为什么我不尝试使用：hover伪类而不是jQuery hover来做到这一点的原因。因为我使用的是图像地图，所以我将所有翻转png（具有透明背景）调整为适合整个容器的大小，以进行精确放置，以便所有内容都能精确对齐。

我得到的作品...不是真的！正确映射了图像映射，以仅激活几何区域。但是每个翻转区域中的href只能间歇性地工作，并且将jQuery悬停与CSS可见性结合使用很混乱。所需的行为是，滚动到该区域只会使形状变实。实际发生的是，形状内部的任何运动都会在可见和隐藏之间快速切换。当光标停在形状内时，它可能是可见的，也可能不是。任何想法表示赞赏！

悬停设置示例（我最终将使用数组进行实际的悬停，关联的链接和文本）：

$('#triangle').hover(

    function() {

        $('#ID_triangle').css({'visibility' : 'visible'});

    },

    function() {

        $('#ID_triangle').css({'visibility' : 'hidden'});

    }

)

图片图：

<div id="container">

    <img src="images/testMap_w.png" width="800" height="220" alt="TestMap W" usemap="#testMap">

    <map name="testMap">

        <area shape="polygon" coords="20,20,106,20,106,106,20,106" href="http://www.stackoverflow.com" id="box" />

        <area shape="polygon" coords="216,50,339,50,277,156" href="http://www.google.com" id="triangle" />

        <area shape="polygon" coords="460,0,574,0,460,220" href="http://www.cnn.com" id="bordertriangle" />

        <area shape="polygon" coords="704,65,769,115,744,196,665,196,640,115" href="http://slashdot.org" id="pentagon" />

    </map>

    <img src="images/testMap_box.png" width="800" height="220" alt="TestMap Box" id="ID_box">

    <img src="images/testMap_triangle.png" width="800" height="220" alt="TestMap Triangle" id="ID_triangle">

    <img src="images/testMap_border_triangle.png" width="800" height="220" alt="TestMap Border Triangle" id="ID_bordertriangle">

    <img src="images/testMap_pentagon.png" width="800" height="220" alt="TestMap Pentagon" id="ID_pentagon">

</div>

Answer 1

这个问题很旧，但是我想为当时尚不存在的答案添加一个替代方案。Image Mapster是我编写的jQuery插件，用于解决Map Hilight的某些缺点（尽管它几乎已被完全重写，但它最初是该插件的扩展）。最初，这只是维护区域选择状态，修复浏览器兼容性问题的能力。但是，自几个月前首次发布以来，我添加了许多功能，包括使用备用图像作为亮点源的功能。它还具有将区域标识为“蒙版”的功能，这意味着您可以创建带有“孔”的区域，还可以创建复杂的区域分组。例如，区域A可能导致另一个区域B突出显示，但是区域B本身不会响应鼠标事件。网站上有一些显示大多数功能的示例。在GitHub的仓库也有更多的例子和完整的文档。

Answer 2

我找到了我过去使用过的出色的映射脚本（mapper.js）。它的不同之处在于您可以将鼠标悬停在地图上或页面上的链接上，以突出显示地图区域。可悲的是，它是用JavaScript编写的，并且需要大量HTML内联代码-我很想看到这个脚本移植到jQuery：P另外，请查看所有演示！我认为这个例子几乎可以做成一个简单的在线游戏（不使用闪光灯）-确保单击不同的摄像机角度。