javascript - Using JQuery hover with HTML image map

Question

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>

Answer 1

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.