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