将 JQuery 悬停与 HTML 图像地图结合使用
我有一张复杂的背景图像，其中有许多需要翻转插图突出显示的小区域，以及每个区域的附加文本显示和关联链接。 最终插图使用 z 索引堆叠多个具有透明度的静态图像，并且高亮翻转插图需要显示在中间的“三明治”层之一中才能达到所需的效果。
在对块进行了一些不成功的摆弄之后，我决定这可以用老式的图像地图来完成。 我制作了一个带有四个几何形状轮廓的示意性测试图，并使用 png 翻转“填充”它们。 这个想法是将图像贴图与底部背景层相关联，使用 css {visibility: hide} 初始化所有翻转，并使用 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>
I have a complicated background image with a lot of small regions that need rollover illustration highlights, along with additional text display and associated links for each one. The final illustration stacks several static images with transparency using z-index, and the highlight rollover illustrations need to display in one of the in-between “sandwich” layers to achieve the desired effect.
After some unsuccessful fiddling with blocks, I decided this might be done with an old-school image map. I made a schematic test map with four geometric shape outlines and “filled” them using with png rollovers. The idea is to associate the image map with the bottom background layer, initialize all the rollovers with css {visibility: hidden} and use Jquery’s hover method to make them visible as well as reveal associated text in a separate div. The separate text function is why I’m not trying to this with the :hover pseudoclass instead of jQuery hover. Because I was using the image map, I made all the rollover pngs (which have transparent backgrounds) sized to the full container for exact placement so everything lines up precisely.
What I got works... not really! The image map is correctly mapped to activate only the geometric areas. But the href from each rollover area works only intermittently, and using Jquery hover with css visibility is messed up. Desired behavior is that rolling into the area simply would make the shape solid. What actually happens is any motion inside the shape makes rapid toggling between visible and hidden; when the cursor stops within the shape, it might be visible or it might not. Any ideas appreciated!
sample hover setup (I’ll ultimately use arrays for real rollovers, associated links and text):
$('#triangle').hover(
function() {
$('#ID_triangle').css({'visibility' : 'visible'});
},
function() {
$('#ID_triangle').css({'visibility' : 'hidden'});
}
)
image map:
<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>
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（4）
您应该查看此插件：
https://github.com/kemayo/maphilight
和演示：
< a href="http://davidlynch.org/js/maphilight/docs/demo_usa.html" rel="noreferrer">http://davidlynch.org/js/maphilight/docs/demo_usa.html
如果任何事情，你也许可以从中借用一些代码来修复你的代码。
You should check out this plugin:
https://github.com/kemayo/maphilight
and the demo:
http://davidlynch.org/js/maphilight/docs/demo_usa.html
if anything, you might be able to borrow some code from it to fix yours.
这个问题很旧，但我想为当时不存在的已接受答案添加一个替代方案。
Image Mapster 是一个 jQuery 插件，我编写它是为了解决 Map Hilight 的一些缺点（它最初是 Map Hilight 的扩展）插件，尽管此后它几乎被完全重写）。 最初，这只是维护区域选择状态、修复浏览器兼容性问题的能力。 不过，自从几个月前首次发布以来，我添加了很多功能，包括使用备用图像作为亮点来源的功能。
它还能够将区域识别为“掩模”，这意味着您可以创建带有“孔”的区域，并另外创建复杂的区域分组。 例如，区域 A 可能会导致另一个区域 B 突出显示，但区域 B 本身不会响应鼠标事件。
网站上有一些示例，展示了大部分功能。 github 存储库 还提供更多示例和完整文档。
This question is old but I wanted to add an alternative to the accepted answer which didn't exist at the time.
Image Mapster is a jQuery plugin that I wrote to solve some of the shortcomings of Map Hilight (and it was initially an extension of that plugin, though it's since been almost completely rewritten). Initially, this was just the ability to maintain selection state for areas, fix browser compatibility problems. Since its initial release a few months ago, though, I have added a lot of features including the ability to use an alternate image as the source for the highlights.
It also has the ability to identify areas as "masks," meaning you can create areas with "holes", and additionally create complex groupings of areas. For example, area A could cause another area B to be highlighted, but area B itself would not respond to mouse events.
There are a few examples on the web site that show most of the features. The github repository also has more examples and complete documentation.
我发现了我过去使用过的这个很棒的映射脚本（mapper.js）。 它的不同之处在于，您可以将鼠标悬停在地图或页面上的链接上以使地图区域突出显示。 遗憾的是，它是用 javascript 编写的，需要在 HTML 中进行大量内联编码 - 我希望看到这个脚本移植到 jQuery :P
另外，请查看所有演示！ 我认为这个例子几乎可以制作成一个简单的在线游戏（不使用flash） - 确保点击不同的摄像机角度。
I found this wonderful mapping script (mapper.js) that I have used in the past. What's different about it is you can hover over the map or a link on your page to make the map area highlight. Sadly it's written in javascript and requires a lot of in-line coding in the HTML - I would love to see this script ported over to jQuery :P
Also, check out all the demos! I think this example could almost be made into a simple online game (without using flash) - make sure you click on the different camera angles.
尽管 jQuery Maphilight 插件可以完成这项工作，但它依赖于 html 中过时的详细图像映射。 我更愿意将地图坐标保留在外部。 这可能是带有 jquery imagemap 插件的 JS，但它缺少悬停状态。 一个很好的解决方案是使用 Flash 和 JS 进行谷歌地理地图可视化。 但这种矢量数据的开源未来是 svg，考虑到所有现代浏览器都支持 svg，并且在 google svgweb 上搜索 IE 的 flash 转换，为什么不使用 jquery 插件向 svg 地图添加链接和悬停状态，如 JS 演示这里？ 这样您还可以避免将矢量图转换为图像图坐标的复杂步骤。
Although jQuery Maphilight plugin does the job, it relies on the outdated verbose imagemap in your html. I would prefer to keep the mapcoordinates external. This could be as JS with the jquery imagemap plugin but it lacks hover states. A nice solution is googles geomap visualisation in flash and JS. But the opensource future for this kind of vectordata however is svg, considering svg support accross all modern browsers, and googles svgweb for a flash convert for IE, why not a jquery plugin to add links and hoverstates to a svg map, like the JS demo here? That way you also avoid the complex step of transforming a vectormap to a imagemap coordinates.