How do I highlight parts of an imagemap on mouseover?

Question

I need to display an imagemap with about 70 areas in it. The area of the imagemap the mouse cursor is currently at is supposed to be highlighted in a certain color.

Answer 1

Yes, this is possible. I've done the exact thing with jquery and the image map area mouseenter / mouseleave events, but not with 70 areas. It will just be more work for you. You may consider loading the images via ajax calls on the mouseover, or using a sprite and positioning so you don't need to load 70 images into the dom.

jquery:

$(document).ready(function() {

    $(".map-areas area").mouseenter(function() {
        var idx = $(".map-areas area").index(this);
        $(".map-hovers img:eq(" + idx + ")").show();
        return false;
    }).mouseleave(function() {
        $(".map-hovers img").hide();
        return false;
    });

});

Where .map-hovers is a div that has all the images that you want to lay over top of your map. You can position them if necessary, or make the image the same size as the image map, but with transparency.

And some html to follow:

NOTE: Notice how the image map area index lines up with the img index within the map-hovers container? ALSO: The image map must point to a transparent gif, and have the background image set to the actual image you want to display. This is a cross-browser thing - can't remember the exact reason.