如何在<area>上放置边框?

问题描述

有没有办法在 元素周围放置边框?

Is there a way to put a border around an <area> element?

我需要这样做来测试图像映射，但这不起作用:

I need to do this for testing an imagemap, but this doesn't work:

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

推荐答案

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

If you're willing to use Javascript, add mouseover/mouseout event listeners to the <area> elements and .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;
}

这篇关于如何在<area>上放置边框?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！