How to get ID of Image in Image Map Mouse Over

Question

Let's say you have two images that use the same image map.

<img src="/test/image1.jpg" id="image1" useMap="map-name">
<img src="/test/image2.jpg" id="image2" useMap="map-name">

<map name="map-name">
  <area shape="rect" coords="0,0,82,126" alt="Sun" onmouseover="testFunction();"/>
  <area shape="circle" coords="90,58,3"  alt="Mercury" onmouseover="testFunction();"/>
  <area shape="circle" coords="124,58,8" alt="Venus" onmouseover="testFunction();"/>
</map>

Is there any way to get the ID of the image (image1|image2 in this case) inside of the testFunction()?

Answer 1

Yes. The easiest way is to use a library like jQuery to hook up the event, instead of using onmouseover. If you do that, you'll basically do something like:

$("AREA").mouseOver(function (e) {
  var id = $(e.target).attr("id");
}

If you don't do that then ... well play around with "this" inside your definition of testFunction, and good luck (because you'll get to deal with the joy of cross-browser incompatibility).