Карта изображения Border on Hover

Question

Я надеюсь получить эффект наведения, предпочтительно цвет границы или свечение вокруг поли области на этой карте изображения. Ниже мой 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> 

И HTML, который включает в себя координаты участков, которые я хотел бы подсвечивается на парении:

<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> 

есть решение Javascript или CSS?

Это грубый пример того, что я пытаюсь достичь: http://www.outsharked.com/imagemapster/default.aspx?demos.html

Answer 1

вы попробуйте «OnMouseOver» и «onMouseOut».

пример

<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';" 

/>