테두리에 테두리를 넣는 방법은 무엇입니까?

Question

<area> 주위에 테두리를 넣는 방법이 있습니까?

나는 이미지 맵을 테스트하기 위해이 작업을 수행 할 필요가 있지만,이 작동하지 않습니다

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

Answer 1

당신은 자바 스크립트를 사용 <area> 요소와 .focus()/.blur()에 mouseover/mouseout 이벤트 리스너를 추가하고자하는 경우.

데모 : 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 : //plugins.jquery :

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