Description
Problem: Imagemap AREA tags' offsetLeft and offsetTop are not defined in the HTML spec which has led to different browsers exhibiting different behaviors.
Consider an HTML ImageMap with a couple of AREA’s:
<img alt="Image" src="./TestImage.jpg" usemap="#myMap" />
<map name="myMap" id="myMap">
<area id="Fox" alt="Fox" shape="rect" coords="344,0,530,170" />
<area id="Grass" alt="Grass" shape="rect" coords="80,160,250,280" />
</map>
Using jQuery/javascript, attach mouseover events to the AREA tags. In the event handler, examine the AREA tag’s offset left & top parameters.
IE exhibits what I believe to be the correct behavior, but both Firefox and Chrome exhibit incorrect, and different behaviors:
- IE9 reports the offsetLeft and offsetTop correctly
- Firefox returns the offsetLeft and offsetTop of the image itself.
- WebKit/Chrome return 0 for both offsetLeft and offsetTop!
This bug prevents reliably determination of the bounding box surrounding an AREA using the offsetLeft and offsetTop parameters. Because of the inconsistent browser behaviors, To work around this, developers have to write code to calculate the bounding box from the cords list for rect and poly area types and also for circle area types.
I’ve filed bugs against Firefox (here) and Chrome (here) for this issue.
I had originally discovered this issue when using the jQuery .position() method which fails because of the above difference in behavior. Please consider driving a common understanding of the offsetTop and offsetLeft properties of AREA tags through the W3C HTML spec process.