有没有办法在<area>
周围放置边框?如何将边界放在区域?
我需要为测试图像映射做到这一点,但是这并不工作:
area {
outline: 1px solid red;
border: 1px solid red;
}
有没有办法在<area>
周围放置边框?如何将边界放在区域?
我需要为测试图像映射做到这一点,但是这并不工作:
area {
outline: 1px solid red;
border: 1px solid red;
}
如果你愿意使用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;
}
+1这是一个非常简洁的答案!韩国社交协会。今天学习了一项新技术。 – techfoobar 2011-12-26 11:18:38
我也是! Thx帮忙! :d – timkl 2011-12-26 15:16:35
也许这个插件可以帮助你的http://plugins.jquery。 com/project/maphilight – 2011-12-26 10:33:21
链接已死。这是另一个:http://davidlynch.org/projects/maphilight/docs/ – Urbycoz 2013-10-28 14:22:20