Question

I’m using the following code to load an image and associated image map:

<span><%= image_tag bookcase.image_url.to_s, :usemap => "#shelfmap" %></span>
<map name="#shelfmap">
  <area shape="rect" coords="0,0,500,100" href="\" alt="test" />
</map>

The image map loads in Google Chrome, but for some reason it doesn’t display in Firefox. I checked the source code and the image does have a usemap parameter set to “#shelfmap”. I’m not sure what else could be the problem.

Answer 1

From the fine specification:

usemap = hash-name reference
A hash-name reference to a map element with which to associate the image.

And what is a hash-name reference? Well, a hash-name reference is:

A valid hash-name reference to an element of type type is a string that starts with a “#” character, followed by a string which exactly matches the value of the name attribute of an element of type type anywhere in the document.

That means that if you have <img usemap="#x"> then you should have a <map name="x"> element to define the image map; note that the name attribute doesn’t contain the hash. So your <map> should look like this:

<map name="shelfmap">
  <area shape="rect" coords="0,0,500,100" href="\" alt="test" />
</map>

Chrome is being nice by ignoring your error (the # in the name attribute), Firefox is being nice by forcing you to stick to the specification rather than trying to guess what you mean.