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

I tried to use ScottE's solution but unfortunately that meant adding the target image as a body background.

My solution is very close to his, but uses proper images

jQuery:

$(document).ready(function() {

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

});

The key concept here is that once you enter the map area, you show the map-hovers image, which then becomes your active layer under the mouse - Simply detecting when you leave that image is what make is smooth.

HTML: (almost the same, no need for trans image)