How do you Javascript style area elements on mouseover?

Question

I've got an image map w/ 20 area elements, only four shown below. I want to style each area so that a blue border appears whenever a user hovers over it - all the area shapes are rectangles.

<map id="mymap" name="mymap">
    <area shape="rect" coords="0,0,223,221" href="http://..." />
    <area shape="rect" coords="226,0,448,221" href="http://..." />
    <area shape="rect" coords="451,0,673,223" href="http://..." />
    <area shape="rect" coords="677,0,1122,223" href="http://..." />
    ...
</map>

---

I've tried using CSS to style each area, but it's not working. And I've tried to put an onmouseover=color() on the map element and call the following func, but that doesn't seem to be working either:

function color() {
    var blueboxes = document.getElementsByTagName('area');
    for(var i=0; i<blueboxes.length; i++) {
        blueboxes[i].style.border = 'solid blue 5px';
    }
}

Answer 1

Can Raphaeljs helps?

Have a look at this sample :)

Answer 2

Try this article to see if it helps:

http://www.iamjacksdesign.com/blog/add-hover-effects-to-your-image-maps/

Answer 3

Usually the approach I see is to build the imagemap itself out of different images in CSS. Here's a good example of this:

http://ago.tanfa.co.uk/css/examples/europe-map.html

Answer 4

The area tag can't be styled like a normal anchor. I would use a different approach. You could apply your image to a div as the background-image and then position clickable elements over the div by using position: absolute.

Take a look at this technique: http://www.alistapart.com/articles/cssmaps/