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

Question

如果您快速浏览下面的两个链接，您会看到大多数人想要摆脱图像上地图区域周围的轮廓。我发现这只发生在MAC OS X平台上。

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)

但是，我想要做的是在多个浏览器中显示轮廓并更改它的颜色和宽度。我试过但是有用。我为id创建了一个样式。没工作。我尝试使用一个类，但没有用。我设置了内联样式，但也没有用。顺便说一句，我在地图和区域标签上尝试了它。

截至目前，我点击时使用gif“边框”区域。但如果我可以利用内置的shape属性来突出显示所点击的区域，那么它会让事情变得如此简单。

非常感谢您的帮助。

Answer 1

这个答案看起来很有趣：

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

链接到这里：http://davidlynch.org/js/maphilight/docs/demo_simple.html

Answer 2

旧版本的Internet Explorer不尊重区域大纲的CSS。您可以通过阻止mousedown事件的默认处理来解决此问题。如果使用jquery，比如

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

将为页面上的所有图像映射处理它。

另请查看我的插件：http://www.outsharked.com/imagemapster，它可让您轻松处理鼠标悬停和点击事件的轮廓（和其他）效果。