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;
}
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;
}
Share
Improve this question
edited Aug 2, 2021 at 18:43
TylerH
21.1k77 gold badges79 silver badges112 bronze badges
asked Dec 26, 2011 at 10:29
timkltimkl
3,33912 gold badges59 silver badges71 bronze badges
2
- Maybe this plugin helps you plugins.jquery./project/maphilight – Sergey Ratnikov Commented Dec 26, 2011 at 10:33
- That link's dead. Here's another: davidlynch/projects/maphilight/docs – Urbycoz Commented Oct 28, 2013 at 14:22
1 Answer
Reset to default 8If you're willing to use Javascript, add mouseover/mouseout
event listeners to the <area>
elements and .focus()/.blur()
.
Demo: http://jsfiddle/ThinkingStiff/Lwnf3/
Script:
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./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;
}