0

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.

mu is too short
  • 426,620
  • 70
  • 833
  • 800
nullnullnull
  • 8,039
  • 12
  • 55
  • 107

1 Answers1

2

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.

mu is too short
  • 426,620
  • 70
  • 833
  • 800
  • "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." Ha! Great way to put it! And thanks for quick reply. This was exactly what I needed to read. – nullnullnull Jun 16 '12 at 22:26