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

2022-01-22 00:00:00 hover jquery javascript imagemap

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

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.

在对块的一些不成功的摆弄之后，我决定可以使用老式的图像映射来完成.我制作了一个带有四个几何形状轮廓的示意性测试地图，并使用 png 翻转填充"它们.想法是将图像映射与底部背景层相关联，使用 css {visibility: hidden} 初始化所有翻转，并使用 Jquery 的悬停方法使它们可见，并在单独的 div 中显示关联的文本.单独的文本函数是我不尝试使用 :hover 伪类而不是 jQuery hover 的原因.因为我使用的是图像映射，所以我将所有翻转 png(具有透明背景)的大小调整为完整容器的大小，以便准确放置，以便所有内容都精确排列.

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.

我得到的东西......不是真的！正确映射图像映射以仅激活几何区域.但是每个翻转区域的 href 只能间歇性地工作，并且使用带有 css 可见性的 Jquery 悬停是一团糟.期望的行为是滚入该区域只会使形状变得坚固.实际发生的是形状内部的任何运动都会在可见和隐藏之间快速切换；当光标停在形状内时，它可能可见，也可能不可见.任何想法表示赞赏！

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'});
    }
)

图片地图:

<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

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

if anything, you might be able to borrow some code from it to fix yours.

相关文章