如何显示图像地图区域的轮廓（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 在单击时为该区域“加边框”。但是如果我可以利用内置的形状属性来突出显示点击的区域，事情就会变得容易得多。

非常感谢您的帮助。

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，它可以让您轻松处理鼠标悬停和单击事件上的轮廓（和其他）效果。