When working in HTML, it's important to remember that only one element can be focused on at a time. However, you have the option to add a class to multiple <area> elements and style them accordingly to give the appearance of being selected.
In the example below, I demonstrate adding a click event handler to the <map> element. This listener will iterate through the <area> elements within the <map>, remove the current class name for each item, and then apply the class name "selected" if the href attribute matches with the clicked target.
<!DOCTYPE html>
<html lang="en">
<head>
<style>map .selected { border:1px dashed green; }</style>
</head>
<body>
<div class="map">
<MAP id="map1" name="map1">
<AREA HREF="#" SHAPE="poly" ALT="" COORDS="85,6,85,7,84,7..."/>
<AREA HREF="#" SHAPE="poly" ALT="" COORDS="90,60,55,7,94,28..."/>
</Map>
<IMG SRC="France.png" USEMAP="#map1" />
</div>
<script type="text/javascript">
var map = document.selectElementById('map1");
map.addEventListener('click',function(event) {
var t = event.target;
for(var i = 0; i < map.children.length; i++) {
map.children[i].className = '';
if(t.href == map.children[i].href)
map.children[i].className = 'selected';
}
});
</script>
</body>
</html>