65

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

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

4 回答 4

60

你应该看看这个插件：

https://github.com/kemayo/maphilight

和演示：

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

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

于 2009-04-13T20:07:26.053 回答
43

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

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

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

网站上有几个例子展示了大部分功能。github 存储库也有更多示例和完整文档。

于 2011-07-14T15:24:52.273 回答
3

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

另外，请查看所有演示！我认为这个例子几乎可以做成一个简单的在线游戏（不使用闪光灯）——确保你点击不同的摄像机角度。

于 2009-07-29T15:18:08.537 回答
2

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

于 2009-12-15T22:46:06.123 回答