Help: Image Map hover image problem

[astropenguin]

site: http://atlasesports.net

 

We're trying to make the logo in the middle change to a new image when we hover over it. The problem is we have an image map with that image so it's really difficult to add a hover image with an image map. We had it working, then I added a second image map and it stopped working.

<script type="text/javascript">   function init(){      document.getElementsByTagName('area')[0].onmouseover=function(){      document.getElementById('atlaslogo').src='images/logo_hover.png';      this.onmouseout=function() {         document.getElementById('atlaslogo').src='images/logo.png';      }   }}if(window.addEventListener){   window.addEventListener('load',init,false);}else{   if(window.attachEvent){      window.attachEvent('onload',init);   }}</script> <div id="whiteheader"><div style="position:absolute;" id="i_menu"><img src="/images/interactive menu/i_menu_default.png" border="0" width="400" height="150" orgWidth="500" orgHeight="200" usemap="#i_menu" alt="" /><map name="i_menu" id="ImageMapsCom-image-maps-2014-06-30-160019"><area shape="rect" coords="398,148,400,150" alt="Image Map" style="outline:none;" title="Atlas eSports"/><area  alt="" title="" href="http://atlasesports.net/index.php?/forum/3-league-of-legends/" shape="poly" coords="21,0,94,151,165,150,94,0" style="outline:none;" target="_self"/><area  alt="" title="" href="http://atlasesports.net/index.php?/forum/6-counter-strike-global-offensive/" shape="poly" coords="94,0,165,149,235,149,166,0" style="outline:none;" target="_self"/><area  alt="" title="" href="" shape="poly" coords="166,0,234,150,305,149,237,1" style="outline:none;" target="_self"/><area  alt="" title="" href="" shape="poly" coords="236,0,306,149,378,149,309,0" style="outline:none;" target="_self"/></map></div>   <div id="logowrapper">      <img id="atlaslogo-bg" src="images/logo_background.png"></img>      <img id="atlaslogo" src="images/logo.png" usemap="#logospace"></img>      <map name="logospace" id="logospace">         <area shape="poly" coords="115,1,208,63,204,126,197,164,192,183,180,202,176,207,161,225,140,242,115,260,78,233,56,211,38,182,29,143,25,106,22,63" href="http://www.atlasesports.net">      </map>   </div></div>

[L8V2L]

Post this in JavaScript section.

Edited July 8, 2014 by L8V2L