使用JQueryhover与HTML图像映射
我有一个复杂的背景图片，有很多需要滚动插图突出显示的小区域，以及其他文本显示和相关链接。 最后的图解使用Z-index叠加了几张带有透明度的静态图像，高亮翻转插图需要在中间的“三明治”层之一中显示，以达到所需的效果。
经过一些不成功的块摆弄，我决定这可能是一个古老的图像地图。 我制作了一张带有四个几何形状轮廓的电路图testing图，并用png翻转“填充”了它们。 这个想法是将图像映射与底部背景层关联起来，用css {visibility：hidden}初始化所有的翻转，并使用Jquery的hover方法使它们可见，并在单独的div中显示相关的文本。 单独的文本函数是为什么我不用这个：hover伪类而不是jQueryhover。 因为我正在使用图像映射，所以我将所有翻转png（具有透明背景）的大小设置为整个容器，以便精确放置，因此所有内容都精确排列。
我得到的作品…不是真的！ 图像映射正确映射以仅激活几何区域。 但是，每个翻转区域的href只能间歇地工作，而使用jQuery的hover与CSS的可见性是搞砸了。 期望的行为是滚动到该区域将简单的形状。 实际上发生的事情是，形状内部的任何运动都会在可见和隐藏之间快速切换; 当光标在形状内停止时，它可能是可见的，也可能不是。 任何想法赞赏！
样本hover设置（我将最终使用真正的翻转数组，相关的链接和文本）：
$('#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
如果有的话，你可能可以借用一些代码来修复你的问题。
这个问题是古老的，但我想添加一个当时不存在的接受答案的替代scheme。
Image Mapster是我写的一个jQuery插件，用于解决Map Hilight的一些缺点（它最初是该插件的扩展，尽pipe它几乎完全被重写）。 最初，这只是维持区域select状态的能力，解决了浏览器兼容性问题。 自从几个月前的最初发布以来，我添加了很多function，包括使用备用图像作为亮点来源。
它还能够将区域标识为“蒙版”，这意味着您可以创build带有“空洞”的区域，还可以创build复杂的区域分组。 例如，区域A可能导致另一个区域B被突出显示，但区域B本身不会响应鼠标事件。
网站上有几个例子显示了大部分function。 github版本库也有更多的例子和完整的文档。
我发现了过去曾经使用过的美妙的映射脚本（ mapper.js ）。 与此不同的是，您可以将鼠标hover在地图上或网页上的链接上，以突出显示地图区域。 不幸的是，它是用JavaScript编写的，并且需要在HTML中进行大量的内联编码 – 我希望将这个脚本移植到jQuery：P
另外，看看所有的演示！ 我认为这个例子几乎可以做成一个简单的在线游戏（不使用闪光灯） – 确保你点击不同的相机angular度。
尽pipejQuery Maphilight插件可以完成这项工作，但它依赖于HTML中过时的冗长的图片映射。 我宁愿将地图坐标保持在外部。 这可能是JS与jQuery图像插件，但它没有hover状态。 一个很好的解决scheme是在Flash和JS中使用googles geomap可视化。 但是，这种vectordata的开源未来然而，考虑到所有现代浏览器的svg支持，以及谷歌svgweb的Flash转换为什么不是一个jQuery插件添加链接和hoverstates到一个SVG地图，如JS演示这里 ？ 这样，您也可以避免将vector图转换为图像坐标的复杂步骤。
