20120117

OnMouseOver event issues in Google Chrome with the Area / Map tags

While building a website for my employer, I wanted to do a polygonal image map, since the links in our logo would be odd-shaped. This worked beautifully in Firefox, IE, Safari, and Opera, but I couldn't seem to get it to work in Chrome; I was just met with a logo.

After much trial-and-error and a significant amount of searching, I had a hunch. My !DOCTYPE is XHTML 1.0 Transitional, and since the "name" attribute is deprecated, I always use the "id" attribute for labeling tags. This makes sense, given the Javascript method getElementByID() is, by its very name and nature, looking for the ID of the tag.

The fix? Add the "name" attribute back in to the <map> tag.
<map id="triadmap">
became:
<map id="triadmap" name="triadmap">

And *poof*, just like that, all is well and all browsers lived with our website happily ever after.