使用JQuery悬停与HTML图像映射

Question

我有一个复杂的背景图像,有很多小区域需要翻转图高亮,以及每个区域的附加文本显示和相关链接.最后的插图使用z-index堆叠了几个具有透明度的静态图像,并且高亮翻转插图需要在中间的"三明治"层之一中显示以实现期望的效果.

在一些不成功的摆弄块后,我决定这可能是用旧式的图像映射完成的.我制作了一个带有四个几何形状轮廓的示意性测试图,并使用png翻转"填充"它们.我们的想法是将图像映射与底部背景图层相关联,使用css {visibility:hidden}初始化所有翻转,并使用Jquery的悬停方法使它们可见,并在单独的div中显示相关文本.单独的文本函数是我没有尝试使用:hover pseudoclass而不是jQuery hover的原因.因为我正在使用图像映射,所以我将所有翻转png(具有透明背景)的大小设置为整个容器以进行精确放置,因此所有内容都准确排列.

我得到了什么......不是真的!正确映射图像映射以仅激活几何区域.但是每个翻转区域的href只是间歇性地工作,并且使用带有css可见性的Jquery悬停是混乱的.期望的行为是滚入该区域只会使形状变得坚固.实际发生的是,形状内的任何运动都可以在可见和隐藏之间快速切换; 当光标在形状内停止时,它可能是可见的,也可能不是.任何想法赞赏!

样本悬停设置(我最终会使用数组进行实际翻转,相关链接和文本):

$('#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

你应该看看这个插件:

https://github.com/kemayo/maphilight

和演示:

http://davidlynch.org/js/maphilight/docs/demo_usa.html

如果有的话,你可能可以从中借用一些代码来修复你的代码.

Answer 2

这个问题已经很久了,但我想补充一个当时不存在的已接受答案的替代方案.

Image Mapster是一个jQuery插件,我写这个插件是为了解决Map Hilight的一些缺点(它最初是该插件的扩展,尽管它几乎已被完全重写).最初,这只是维护区域选择状态的能力,修复浏览器兼容性问题.自几个月前首次发布以来,我添加了许多功能,包括使用备用图像作为高光源的功能.

它还能够将区域识别为"掩模",这意味着您可以创建具有"洞"的区域,并另外创建复杂的区域分组.例如,区域A可能导致另一个区域B被突出显示,但区域B本身不会响应鼠标事件.

网站上有一些示例显示了大部分功能.在GitHub的仓库也有更多的例子和完整的文档.