使用带有 HTML 图像映射的 JQuery 悬停答案

【问题标题】：Using JQuery hover with HTML image map使用带有 HTML 图像映射的 JQuery 悬停
【发布时间】：2010-10-19 05:01:09
【问题描述】：

我有一个复杂的背景图像，其中包含许多需要翻转插图突出显示的小区域，以及每个区域的附加文本显示和相关链接。最终插图使用 z-index 堆叠了几张具有透明度的静态图像，并且高光翻转插图需要显示在中间的“三明治”层之一中才能达到预期的效果。

在对块的一些不成功的摆弄之后，我决定可以使用老式的图像映射来完成。我制作了一个带有四个几何形状轮廓的示意性测试地图，并使用 png 翻转“填充”它们。想法是将图像映射与底部背景层相关联，使用 css {visibility: hidden} 初始化所有翻转，并使用 Jquery 的悬停方法使它们可见，并在单独的 div 中显示关联的文本。单独的文本函数是我不尝试使用 :hover 伪类而不是 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>

【问题讨论】：

本教程可能会有所帮助：Rollover effects using jQuery Maphilight plugin

标签： javascript jquery hover imagemap

【解决方案1】：

你应该看看这个插件：

https://github.com/kemayo/maphilight

和演示：

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

如果有的话，你也许可以借用一些代码来修复你的。

【讨论】：

谢谢。它只是利用平面覆盖的地图坐标。我在最终横幅中得到的翻转使用不平坦的渐变透明度，但如果我不能让它工作，这是一个很好的后备。
它可以在我的 IE8 和这里托管的外部 IE8 上运行 spoon.net/Browsers @digiguru：你说的“不起作用”是什么意思？能否提供具体情况。
这个插件的文档记录很差，为什么任何搜索“jquery image map”都会返回这个插件，我讨厌人们认为一个插件是所有事情的答案，而实际上它可能是无需插件即可轻松完成所需的操作（这通常会不必要地限制您可以做的事情，好像它不是其 API 的一部分，使用插件比自己编写代码更痛苦）
人们可能认为无论在 google 上排名第一，它都是解决问题的最佳方法。
好消息：Google 上排名第一的结果现在是这个问题。 :-)

【解决方案2】：

这个问题很老，但我想为当时不存在的已接受答案添加一个替代方案。

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

它还能够将区域识别为“蒙版”，这意味着您可以创建带有“孔”的区域，还可以创建复杂的区域分组。例如，区域 A 可能会导致另一个区域 B 突出显示，但区域 B 本身不会响应鼠标事件。

网站上有几个示例可以展示大部分功能。 github repository 也有更多示例和完整文档。

【讨论】：

【解决方案3】：

我发现了我过去使用过的这个很棒的映射脚本 (mapper.js)。它的不同之处在于您可以将鼠标悬停在地图或页面上的链接上以突出显示地图区域。遗憾的是，它是用 javascript 编写的，需要在 HTML 中进行大量内联编码 - 我希望看到这个脚本移植到 jQuery 中：P

另外，请查看所有演示！我认为this example 几乎可以制作成一个简单的在线游戏（不使用闪光灯） - 确保您点击不同的相机角度。

【讨论】：

【解决方案4】：

虽然 jQuery Maphilight 插件可以完成这项工作，但它依赖于 html 中过时的详细图像映射。我更愿意将地图坐标保持在外部。这可能是带有 jquery imagemap 插件的 JS，但它缺少悬停状态。一个不错的解决方案是在 Flash 和 JS 中使用谷歌地理地图可视化。但是，这种矢量数据的开源未来是 svg，考虑到所有现代浏览器都支持 svg，以及谷歌 svgweb 用于 IE 的 Flash 转换，为什么不使用 jquery 插件将链接和悬停状态添加到 svg 地图，如 JS 演示here?这样您还可以避免将矢量地图转换为图像地图坐标的复杂步骤。

【讨论】：