如何显示图像地图区域的轮廓（html，javascript）？

Question

If you take a quick look at the two links below, you'll see most people want to get rid of the outline around the area of a map on an image. I see this occurs on the MAC OS X platform, exclusively.

Removing outline on image map area

How do I get rid of this border outline for my image map areas when clicked (OS X Chrome Only)

However, what I want to do is show the outline in multiple browsers and change it's color and width. I tried but to avail. I created a style for an id. Didn't work. I tried using a class and that didn't work. I set an inline style and that didn't work, either. And I attempted it on both the map and area tags, by the way.

As of now, I use a gif to "border" the area when clicked. But it would make things so much easier if I could take advantage of the built-in shape attribute to highlight the area clicked.

Thank you very much for any help.

Answer 1

This answer looks interesting:

Changing the colour/transparency of a div on rollover or using an imagemap

Links to here: http://davidlynch.org/js/maphilight/docs/demo_simple.html

Answer 2

Older versions of Internet Explorer do not respect CSS for the area outlines. You can solve this by blocking the default handing of the mousedown event. If using jquery, something like

$('area').bind('mousedown',function(e) {
    e.preventDefault();
});

would take care of it for all image maps on the page.

Also take a look at my plugin: http://www.outsharked.com/imagemapster which will let you easily handle outline (and other) effects on mouseover and click events.