使用JQuery悬停与HTML图像映射 [英] Using JQuery hover with HTML image map

问题描述

我有一个复杂的背景图片，其中包含许多需要翻转插图突出显示的小区域，以及其他文本显示和每个连接的相关链接。最终的插图使用z-index叠加了几张带有透明度的静态图像，高亮翻转插图需要在中间的三明治层之一中显示，以达到所需的效果。

在一些不成功的块摆弄之后，我决定这可以用一张古老的图像地图来完成。我制作了一张带有四个几何形状轮廓的示意测试图，并使用png翻转填充它们。我们的想法是将图像映射与底部背景图层相关联，使用css {visibility：hidden}初始化所有展开图，并使用Jquery的悬停方法使它们可见，并在单独的div中显示相关文本。单独的文本函数是为什么我不用这个：hover伪类而不是jQuery悬停。因为我使用的是图像映射，因此我将所有翻转PNG（具有透明背景）的大小设置为整个容器的精确位置，以便精确地排列一切。

什么我得到了作品...不是真的！图像映射正确映射以仅激活几何区域。但是，每个翻转区域的href只能间歇性地工作，并且使用jQuery的悬停和css可见性会搞砸。期望的行为是滚动到该区域将简化形状。实际发生的情况是，形状内的任何运动都会在可见和隐藏之间快速切换;当光标在形状内停止时，它可能是可见的，或者它可能不是。

示例悬停设置（我将最终使用数组实现翻转，关联链接和文本）：

  $（'＃triangle'）。hover（
 function（）{
 $（'＃ID_triangle'）。css（{ 'visibility'：'visible'}）; 
}，
 function（）{
 $（'＃ID_triangle'）。css（{'visibility'：'hidden'}）; 
 
 
 $ / code $ / pre 
 
 
图像映射：
 
 
 < div id =container> 
< img src =images / testMap_w.pngwidth =800height =220alt =TestMap Wusemap =＃testMap> 
< map name =testMap> 
< area shape =polygoncoords =20,20,106,20,106,106,20,106href =http://www.stackoverflow.comid =box/> 
< area shape =polygoncoords =216,50,339,50,277,156href =http://www.google.comid =triangle/> 
< area shape =polygoncoords =460,0,574,0,460,220href =http://www.cnn.comid =bordertriangle/> 
< area shape =polygoncoords =704,65,769,115,744,196,665,196,640,115href =http://slashdot.orgid =pentagon/> 
< / map> 
< img src =images / testMap_box.pngwidth =800height =220alt =TestMap Boxid =ID_box> 
< img src =images / testMap_triangle.pngwidth =800height =220alt =TestMap Triangleid =ID_triangle> 
< img src =images / testMap_border_triangle.pngwidth =800height =220alt =TestMap Border Triangleid =ID_bordertriangle> 
< img src =images / testMap_pentagon.pngwidth =800height =220alt =TestMap Pentagonid =ID_pentagon> 
< / div> 
  
 
 
解决方案
你应该看看这个插件：
 
 
 
  https://github.com/kemayo/maphilight  
 
 
 
和演示： 
 
 
  http://davidlynch.org/js/maphilight/docs/demo_usa.html  
 
 
 
如果有的话，你可能可以借用一些代码来修复你的问题。
 
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>

解决方案
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.

                        
这篇关于使用JQuery悬停与HTML图像映射的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！