Search code examples
htmlruby-on-railsfirefoximagemap

Rails: image_tag and usemap not playing nice with Firefox


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.


Solution

  • 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.