Search code examples
htmlbrowsersyntaximagemap

Image Map not referenceable by ID?

I have an image and a map embedded as such:

<img src="planets.gif" width="145" height="126" alt="Planets" usemap="planetmap" />
<map id="planetmap">
  ...

It's NOT working. I tried using the name attribute for map:

<img src="planets.gif" width="145" height="126" alt="Planets" usemap="#planetmap" />
<map name="planetmap">
  ...

And it worked! Even this:

<img src="planets.gif" width="145" height="126" alt="Planets" usemap="#planetmap" />
<map id="planetmap">
  ...

worked, albeit only in IE9 and not in Chrome. Is it because Chrome doesn't support it or is it just because IE's engine is sloppy?

What am I doing wrong here? W3Schools explicitly recommends using the id attribute as opposed to name:

Differences Between HTML and XHTML

In XHTML, the name attribute of the tag is deprecated, and will be removed. Use the > id attribute instead

My DOCTYPE is <!DOCTYPE html>.

Solution

  • The name attribute for <map> is not deprecated. In fact, it's even a part of the HTML5 specification for <map>.

    Also XHTML != HTML5.
    Finally, do not use W3schools as a reference. Instead, use the Mozilla Developer Network.
    To get quality documentation, prepend or append "mdn" to your keywords, e.g. "mdn image map".