क्षेत्र पर सीमा कैसे लगाएं?

Question

क्या <area> के आसपास सीमा डालने का कोई तरीका है?

मैं एक ImageMap के परीक्षण के लिए ऐसा करने की जरूरत है, लेकिन यह काम नहीं करता:

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> 

सीएसएस:

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