Image Map Border on Hover - hover

Question

I'm hoping to have a hover effect, preferably a border color or glow around the poly area on this image map. Below is my Javascript:
<script>
window.onload = function () {
var ImageMap = function (map, img) {
var n,
areas = map.getElementsByTagName('area'),
len = areas.length,
coords = [],
previousWidth = 700;
for (n = 0; n < len; n++) {
coords[n] = areas[n].coords.split(',');
}
this.resize = function () {
var n, m, clen,
x = img.offsetWidth / previousWidth;
for (n = 0; n < len; n++) {
clen = coords[n].length;
for (m = 0; m < clen; m++) {
coords[n][m] *= x;
}
areas[n].coords = coords[n].join(',');
}
previousWidth = img.offsetWidth;
return true;
};
window.onresize = this.resize;
},
imageMap = new ImageMap(document.getElementById('map_ID'), document.getElementById('img_ID'));
imageMap.resize();
return;
}
</script>
And the HTML that includes the coordinates for the sections that I would like highlighted on hover:
<div style="width:100%;">
<img id="img_ID" src="http://libraries.adelphi.edu/files/2016/10/Overview-Final.jpg" usemap="#map" border="0" width="100%" alt="" />
</div>
<map id="map_ID" name="map">
<area shape="poly" coords="133,309,70,330,68,347,199,392,239,373,193,364,191,342,209,340,209,329" alt="Level S" title="Level S" href="http://libraries.adelphi.edu/files/2016/10/Swirbul-Level-S-10-2016.jpg" target="_self" />
<area shape="poly" coords="244,310,200,324,64,286,64,267,146,243,207,257,208,294,241,293" alt="Level 2S" title="Level 2S" href="http://libraries.adelphi.edu/files/2016/10/Swirbul-Level-2S-10-2016.jpg" target="_self" />
<area shape="poly" coords="193,344,194,356,350,406,469,343,469,328,319,295,294,319,253,343,236,341" alt="Level C" title="Level C" href="http://libraries.adelphi.edu/files/2016/10/Swirbul-Level-C-10-2016.jpg" target="_self" />
<area shape="poly" coords="188,236,188,252,350,287,673,162,674,153,500,136,355,174,291,167,291,221,240,241,218,236" alt="1st Floor" title="1st Floor" href="http://libraries.adelphi.edu/files/2016/10/Swirbul-Floor1-10-2016.jpg" target="_self" />
<area shape="poly" coords="187,233,186,250,60,221,61,208,165,180,204,184,207,226,205,232" alt="Level 3S" title="Level 3S" href="http://libraries.adelphi.edu/files/2016/10/Swirbul-Level-3S-10-2016.jpg" target="_self" />
<area shape="poly" coords="237,171,190,180,54,156,56,142,166,116,202,120,204,128,182,127,182,149,205,151,233,158" alt="Level 4S" title="Level 4S" href="http://libraries.adelphi.edu/files/2016/10/Swirbul-Level-4S-10-2016.jpg" target="_self" />
<area shape="poly" coords="184,129,184,147,350,172,679,88,680,77,433,58,291,78,291,119,213,131" alt="2nd Floor" title="2nd Floor" href="http://libraries.adelphi.edu/files/2016/10/Swirbul-Floor2-10-2016.jpg" target="_self" />
<area shape="poly" coords="235,98,188,104,51,88,51,74,166,51,201,54,201,80,236,83" alt="Level 5S" title="Level 5S" href="http://libraries.adelphi.edu/files/2016/10/Swirbul-Level-5S-10-2016.jpg" target="_self" />
</map>
Is there a Javascript or CSS solution?
This is a rough example of what I'm trying to achieve:
http://www.outsharked.com/imagemapster/default.aspx?demos.html

Answer 1

you are try to "onMouseOver" and "onMouseOut".
example
<map id="map_ID" name="map">
<area shape="poly" coords="133,309,70,330,68,347,199,392,239,373,193,364,191,342,209,340,209,329" alt="Level S" title="Level S" href="http://libraries.adelphi.edu/files/2016/10/Swirbul-Level-S-10-2016.jpg" target="_self"
onMouseOver="if(document.images) document.getElementById('map_ID').src= ' Over Image URL';"
onMouseOut="if(document.images) document.getElementById('map_ID').src= 'Out Image URL';"
/>