HTML 热点Map area 添加边框

18 min read
<img id="map" src="https://plus.unsplash.com/premium_photo-1668461235652-a11d80b63b64?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxlZGl0b3JpYWwtZmVlZHwxfHx8ZW58MHx8fHw%3D&auto=format&fit=crop&w=800&q=60" usemap="#map"/>
<map name="map">
    <area id="circle" shape="circle" coords="50,50,50" href="#" />
    <area id="circle" shape="circle" coords="100,150,100" href="#" />
</map>
    

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 );
};