How to assign the HTML onmouseover event handler within image area map?

Question

How can I set a onmouseover event handler through using an image map. I wish there to be an image, and as a user hovers over a certain part of the image (set via map co-ordinates) another image should be displayed on top of the initial image within the context of the specified co-ordinates. This is what I have so far but it's not working:

<center>
<p><img src="main.jpg" alt="" usemap="#Map" />
<map name="Map" id="Map">
    <area alt="" title="" href="http://google.com" shape="poly" coords="190,187,163,186,161,139,188,141" onmouseover="this.src='change-face-one.jpg';" />
    <area alt="" title="" href="http://example.com" shape="poly" coords="203,120,202,158,232,159,232,124" onmouseover="this.src='change-face-two.jpg';" />
</map>
</center>

Answer 1

The problem is that <map> is a DOM element. Therefore this in javascript is referencing the #map and NOT the image.

Try giving the image an ID and referencing that.

<center>
<p><img src="main.jpg" alt="" id="theImage" usemap="#Map" />
<map name="Map" id="Map">
    <area alt="" title="" href="http://google.com" shape="poly" coords="190,187,163,186,161,139,188,141" onmouseover="document.getElementByID('theImage').src='change-face-one.jpg';" />
    <area alt="" title="" href="http://example.com" shape="poly" coords="203,120,202,158,232,159,232,124" onmouseover="document.getElementByID('theImage').src='change-face-two.jpg';" />
</map>
</center>

Also, without seeing your images, it's difficult to know what, if any issues they may be causing. For example, if they're different sizes they could cause your hot spots to stop working.