I have an image with a "Visit" button on it that is image mapped with HTML code, it has a roll over effect so that when you put your mouse over the "visit" link, it shows a glow version of the visit button.

But right now the code is not correct, the rollover effect replaces the original image with the glow version image, I simply want the glow version to overlay the original version at the same exact coordinates that are in the html code below: `coords="52,63,145,100"`

I don't want it replace the whole image. And I want the glow version to maintain its normal size. This is the code so far:

```
<div style="text-align:center; width:200px; margin-left:auto; margin-right:auto;">
<img id="Image-Maps_3201304212133558" src="http://www.image-maps.com/uploaded_files/3201304212133558_example78.png" usemap="#Image-Maps_3201304212133558" border="0" width="200" height="200" alt="" />
<map id="_Image-Maps_3201304212133558" name="Image-Maps_3201304212133558">
<area shape="rect" coords="52,63,145,100" href="yahoo.com" alt="visit!" title="visit!" onMouseOver="if(document.images) document.getElementById('Image-Maps_3201304212133558').src= 'http://s15.postimg.org/a71gazzzr/visit_glow.pngmage-maps.com/';" onMouseOut="if(document.images) document.getElementById('Image-Maps_3201304212133558').src= 'http://www.image-maps.com/uploaded_files/3201304212133558_example78.png';"  />
<area shape="rect" coords="198,198,200,200" href="http://www.image-maps.com/index.php?aff=mapped_users_3201304212133558" alt="Image Map" title="Image Map" />
</map>

</div>

```

[Here is a live demo.](http://cssdesk.com/gj9WS)