使用JQuery悬停HTML图像地图

StackOverflow https://stackoverflow.com/questions/745110

题

我有一个复杂的背景图像具有很多小的地区需要翻图突出显示了，随着额外的文字显示和相关链接为每一个。最终的图叠的几个静态图像具有透明度的使用z索引，并将强调翻插图需要显示在一个中间的"三明治"层，以实现所期望的效果。

之后的一些不成功摆弄块，我决定这可能是完成了一个老学校的图像地图。我做出一个示意试图用四个几何形状的概述以及"充满"他们使用与png变换图像。这个想法是要将图像地图与底背景层，初始化的所有翻车css{的知名度：隐藏}和使用google i/o大会的悬停的方法，使他们可见以及揭示相关的案文在单独的div。独立的文本功能是为什么我不是想到这个的：悬停pseudoclass而不是最初徘徊。因为我使用的图像地图，我做了所有的翻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>
有帮助吗？

解决方案

你应该看看这个插件：

https://github.com/kemayo/maphilight

和演示：

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

如果任何东西，你可以借用一些代码修复你的。

其他提示

这个问题是旧的，但我想添加一个替代所接受的答案，根本不存在的时间。

像Mapster 是一个jQuery插件，我写信给解决的一些缺点的地图的高亮(和最初的延伸，虽然这是因为已经几乎完全重写)。最初，这只是能力维护选择状态的地区，修复浏览器的兼容性问题。由于其最初的释放几个月前，我们加入很多的功能包括能够使用一个备用的图像作为来源为重点。

它也有能力确定为"面具"，意思，您可以创建的地区"洞"，并另外创建复杂的集团的领域。例如，区域一可能导致另一个领域B以强调，但是B区本身不应对老鼠的事件。

有几个例子网站上显示大部分功能。的 库。 还有更多的例子和完整的文件。

我发现这个美好的映射脚本(mapper.js)，我已经使用过。有什么不同的是你可以停留在地图或上的一个链接你的网页，使该地区突出。可悲的是，它是写在javascript和需要大量的在线编码在HTML-我要爱看这个脚本移植过来jQuery:P

此外，检查了所有的演示！我认为 这个例子 几乎可以做成一个简单的在线游戏(而不使用闪光灯)-确定你击不同的拍摄角度。

虽然jQuery Maphilight插件做的工作，它依靠的是过时的详细的图像映射在你html。我宁愿保持mapcoordinates外部。这可能是因为JS与s图像映射插件，但它缺乏悬停的国家。一个很好的解决方案是谷歌geomap可在闪光灯和JS。但开放源代码的未来这种vectordata但是svg，考虑到svg支持跨越所有现代化的浏览器和谷歌svgweb为一个闪光转换为即，为什么不jquery插件，增加链接和hoverstates到svg地图，就像JS演示 在这里，?这样你还可以避免复杂的步骤的改变一个vectormap到图像映射的坐标。

许可以下： CC-BY-SA 和 归因
不隶属于 StackOverflow
scroll top