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.

Is this possible and if yes, how?

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.

<div id="container">
        <img src="/images/trans.gif" width="220" height="238" class="map-trans" alt="Map / Carte" usemap="#region-map" />
        <div class="map-hovers">
            <img src="/images/map/sunset-country.png" alt="Sunset Country" />
            <img src="/images/map/north-of-superior.png" alt="North of Superior" />
            <img src="/images/map/algomas-country.png" alt="Algoma's Country" />
            <img src="/images/map/ontarios-wilderness.png" alt="Ontario's Wilderness" />
            <img src="/images/map/rainbow-country.png" alt="Rainbow Country" />
            <img src="/images/map/ontarios-near-north.png" alt="Ontario's Near North" />
            <img src="/images/map/muskoka.png" alt="Muskoka" />    
        </div>
</div>
    <map name="region-map" id="region-map" class="map-areas">
    <area shape="poly" coords="52,19,53,82,36,114,34,126,26,130,5,121,2,110,7,62" href="#d0" alt="Sunset Country" />
    <area shape="poly" coords="93,136,93,113,82,112,77,65,57,51,58,82,41,122,33,133,58,138,74,126" href="#d1" alt="North of Superior" />
    <area shape="poly" coords="98,112,118,123,131,149,130,165,108,161,97,138" href="#d2" alt="Algoma's Country" />
    <area shape="poly" coords="68,2,100,29,124,33,133,74,155,96,159,145,134,146,121,119,101,110,83,107,83,65,55,45,54,16" href="#d3" alt="Ontario's Wilderness" />
    <area shape="poly" coords="151,151,152,167,157,176,152,179,137,178,124,172,133,169,135,150" href="#d4" alt="Rainbow Country" />
    <area shape="poly" coords="160,150,170,167,169,173,160,171,155,162,153,149" href="#d5" alt="Ontario's Near North" />
    <area shape="poly" coords="173,176,162,177,154,184,167,189,178,183" href="#d6" alt="Muskoka" />
    </map>

Answer 2

I don't know if there's a cool way to do it, but you could take your picture as background image of a block element, overlay it with a transparent picture and your image map and then replace this transparent picture on a mouseover event with a picture the area is highlighted in.

On the downside you'll need 70 images of highlighted areas

Answer 3

After actually using it in production I'd say this is the answer: http://plugins.jquery.com/project/maphilight

Using this it takes a few lines of code to implement that feature for any imagemap.