image-map associated with more than one image

Question

Let's say there are several identical images on the page, all associated with the same map:

<img id="img1" usemap="#my-map" .... >
<img id="img2" usemap="#my-map" .... >
<img id="img3" usemap="#my-map" .... >

<map name="my-map">
  <area  .... coords=... class="foo">
  <area ....  coords=... class="bar">
</map>

There is a mouseover eventhandler on each AREA.

Fom within the scope of those area mouseover eventhandlers, i.e. referencing only the variables that are local to the area's mouseover event, no global variables, is it possible to know which image the mouse is on? Is there some transient relationship that is exposed by the DOM, so the area's mouseover eventhandler could answer the question "Which image am I mapping at this moment?"

Please rule out attaching handlers directly to the images themselves. I am not trying to solve the problem but am trying to find out what, if anything, can be known inside the area's mouseover eventhandler about the currently asociated or "hot" image.

Thanks

Answer 1

You can use something like this to find the id.

$('area').bind('mouseover',function(e) {
    alert(e.fromElement.id); // will alert the ID of the image
})​;

There's a ton more information you can get from the fromElement such as the src, outerHTML etc. Your best bet is to use console.log(e); and poke around with what it dumps into the console using Google Chrome or Firebug in Firefox.

EDIT This approach is fickle at best and shouldn't be relied upon. What's available in e appears to be determined by what you're binding to, and what function you're getting e (click, mouseover etc).