[javascript] Using JQuery hover with HTML image map

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>

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.

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.

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.