如何在区域上设置边框？

Question

有没有办法在<area>附近设置边框？

我需要这样做来测试一个imagemap，但这不起作用：

area {
    outline: 1px solid red;
    border: 1px solid red;
}

Answer 1

如果您愿意使用Javascript，请将mouseover/mouseout个事件监听器添加到<area>元素和.focus()/.blur()。

演示：http://jsfiddle.net/ThinkingStiff/Lwnf3/

脚本：

var areas = document.getElementsByTagName( 'area' );
for( var index = 0; index < areas.length; index++ ) {    
    areas[index].addEventListener( 'mouseover', function () {this.focus();}, false );
    areas[index].addEventListener( 'mouseout', function () {this.blur();}, false );
};

HTML：

<img id="map" src="http://thinkingstiff.com/images/matt.jpg" usemap="#map"/>
<map name="map">
    <area shape="circle" coords="50,50,50" href="#" />
    <area shape="circle" coords="100,100,50" href="#" />
</map>

CSS：

#map {
    height: 245px;
    width: 180px;
}