XHTML Image Maps

Album Cover: The Doors

"Before you slip into unconsciousness, I'd like to have another kiss. Another flashing chance at bliss."
The Doors / The Crystal Ship

Posted on December 10, 2003 10:45 PM in Web Development
Warning: This blog entry was written two or more years ago. Therefore, it may contain broken links, out-dated or misleading content, or information that is just plain wrong. Please read on with caution.

I hate it when I am so convinced I've found a bug in Mozilla that I write up complete test cases, only to learn in the process that I'm incorrect. However, in the case of XHTML image maps, I actually learned something useful as well.

In the old days, whenever I needed to use an image map (something I don't do very often), I would create a map, give it a name, and then refer to the name using the "usemap" attribute of the image tag. As it turns out, this technique isn't very far at all from the XHTML-compliant method of using image maps.

While writing some code that required the use of an image map this week, I came to the conclusion that the only real change necessary to make my tried and true technique compliant was to use the map tag's "id" attribute instead of the "name" attribute. So, my image map would look something like the following:

<map id="links">
  <area shape="rect" coords="0,0,100,25" href="imagemap1.html" alt="Link 1" title="Link 1" />
  <area shape="rect" coords="100,0,200,25" href="imagemap2.html" alt="Link 2" title="Link 2" />
</map>

However, even though that approach validated as XHTML 1.0 Strict and worked as expected in Internet Explorer, I noticed that it was causing very strange behavior in Mozilla. When I changed the map tag so that it used the "name" attribute instead of the "id" attribute, thus breaking the validity of the code, it began working in Mozilla. Strange, I thought.

So, true to form, I developed some test cases to use when writing up the bug in Bugzilla. The first test case demonstrates the valid XHTML Strict 1.0 approach, showing that Mozilla incorrectly handles image maps that are written correctly according to the XHTML spec. The second test case shows the invalid approach – the one that works correctly in Mozilla.

I reached an epiphany, though, as I was finishing up the test cases. I tried adding the "name" attribute to the map tag that already had the "id" attribute, and checked for validity. It still validated as XHTML Strict 1.0 and now worked in Mozilla. So using the following technique when coding your image maps will allow you to write valid code that works in IE and Mozilla:

<map id="links" name="links">

Now I'm left with the challenge of deciding whether Mozilla is doing the right thing or not. The more I think about it, the more it seems Mozilla should be able to handle the case where only the "id" attribute is provided, since IE handles this case. Plus, given the fact that omitting the "name" attribute, which seems to have been deprecated in XHTML 1.1, still allows for valid code, you would think Mozilla would handle it correctly.

To make things even worse, I played with image maps some more and found that trying to comply to XHTML 1.1 rules breaks support in Internet Explorer too. In XHTML 1.1, as previously stated, there is no "name" attribute allowed, and it seems as though the # (pound) sign isn't allowed in the "usemap" attribute of the img tag. Interesting...

This may become a two-part post, because I still don't feel like, after all this time, I've got a good grasp on how best to utilize image maps in XHTML.

Comments

Karsten Schramm on July 17, 2004 at 12:58 PM:

I created a bug message ( http://bugzilla.mozilla.org/show_bug.cgi?id=251902 )

They say, it is no bug. They say, you have to deliver a MIME-type application/xhtml+xml

A set to this MIME-type within the document or in a .htaccess file didn't helped on my computer.

As long the only solution is to name the file .xhtml, as long I say, it's a bug, not a feature.

Permalink

Otsu on July 29, 2004 at 9:23 AM:

I think what you've discovered concerning the validation of the "name" attribute in XHTML 1.0 Strict is a great find! I've seen several complaints on weblogs about this very issue, and you are the first to I've seen to discuss the Mozilla bug.

On a site I'm designing, I use inline javascript events "onmouseover" and "onmouseout" on link button images with the "id" and "name" attributes like you prescribed for image maps. Unfortunately when I try to validate the document as XTHML 1.0 Strict I get an error stating that the "name" attribute doesn't exist.

When I use only the "id" attribute, like the validator suggests, the effect validates, and functions happily in Netscape 7.1 and Mozilla 5.0. However the effect is not visible, but the links still work in Opera 7.51. When I tried just the "id" attribute in Internet Explorer 6, I get an error message stating that my "id" value is null, and the links don't work at all.

I would greatly appreciate any advice you could offer on this problem. Below is the code I am using for one of the button effects. It is supported by Netscape and Mozilla, broken in Opera, and causes an error in IE 6.

<a rel="nofollow" href="index.html"><img src="images/buttons/newslink.gif"
onmouseover="document.news.src='images/buttons/newshover.gif'"
onmouseout="document.news.src='images/buttons/newslink.gif'"
onmousedown="document.news.src='images/buttons/newsvisited.gif'"
width="101"
id="news"
class="button"
alt="News!" /></a>


Again, whenever I add the name attribute, it doesn't validate as Strict.

Permalink

Gabriel Florit on March 13, 2005 at 7:33 PM:

While brushing up on XHTML I found that my image map wasn't working in Firefox. A quick search of image maps in Google spit out your webpage, and now I use both id and name in my map tag. Thanks for a quick and simple solution to this.

Gabriel

Permalink

Scott on June 03, 2005 at 2:25 PM:

I can confirm that you're not crazy. I went through EXACTLY the same gyrations that you did, for obtaining an XHTML(Strict) ImageMap.

I recently switched to XHTML 1.1 and my image map(s) failed validation. Digging into the matter further, I compared the DTD definitions for 1.0(Strict) and 1.1(Hypertext Module). First, XHTML 1.0(Strict) DTD allows both "name" and "id" for the 'map' element, whereas the XHTML 1.1 DTD (HyperText Module) allows only "id". Second, the attribute type for usemap changed from %URI; (1.0-strict) to IDREF (1.1). (IDREF = "ID reference" and MUST have the same value as the ID attribute of the map element, which is why # is not allowed).

Clearly, Mozilla is behind the times by not using ID in place of NAME and BOTH Mozilla and IE are behind the times by not supporting a IDREF usemap (requireing the #, which breaks 1.1 validation).

I pick function over validation ... I'll be getting validation errors on my imagemaps till browsers can catch up to a 2001 recommendation

Cheers

-Scott

Permalink

Sharon Jackson on August 15, 2005 at 8:37 PM:

As a student just learning all this I find it overwhelming. I am doing my final project for this semester and planned to include an image map on one of my pages. I was biting myself with rage (I am beginning to truly hate Firefox) until I found your page here and I thank you from the bottom of my heart for the "fix."

Permalink

learn xhtml on September 13, 2005 at 3:06 PM:

"They say, it is no bug. They say, you have to deliver a MIME-type application/xhtml+xml"

The above Is 100% correct. It is not a bug. It works correctly in Firefox and incorrectly in IE. You can only set this through the content-header on server response/request. If you don't know how to do this correctly, it's nobody's fault but your own.

Permalink

matt on September 26, 2005 at 10:59 AM:

Thanks for the help!

Permalink

Tord Holmqvist on November 16, 2005 at 5:55 AM:

Thanks a lot! Have been tring to solve this for some time...

/t

Permalink

Jim Hargan on September 11, 2006 at 12:25 PM:

Well, here it is in late 2006, and Mozilla still refuses to fix this serious bug, claiming that they are the only ones in step in the entire parade. Nonsense! IE Explorer renders this valid code correctly; Mozilla does not.

You've done a great service, Bernie, and I am sorry to say that your blog entry continues to be extremely helpful.

Permalink

Randy Renfro on November 11, 2006 at 2:24 PM:

Hey thanks, I was looking around all over for this, and now I stumbled on your blog, and finally...

Thanks alot, now i have my XHTML page working correctly in firefox. I was hoping to find a fix for this before releasing it to the public!

Permalink

Paul Gibbs on June 08, 2007 at 8:55 AM:

Ditto - thanks for the heads-up.

Permalink

Hugo on April 03, 2008 at 1:33 PM:

Just wanted to say: Thanks.

Permalink

Kevin on April 25, 2008 at 4:25 PM:

More thanks! I was scratching my head on this one while porting a legacy app to Firefox. Info like this is priceless...

Kevin

Permalink

EDave on March 24, 2009 at 9:22 AM:

The problem is, that even Firefox dosn´t work correctly, because it requires that # before the ID

Permalink

judyb on May 19, 2009 at 9:02 PM:

Thanks a bunch. Taking a class, doing extra credit, will probably get even more extra points for fixing per your instructions!

Permalink

BigName TheFucker on December 24, 2009 at 10:24 AM:

great article!
even thought it says this article is written 2 years ago and may be misleading, the method described was fully functional and very useful to me
thanks!

Permalink

Ocypode on April 26, 2010 at 9:51 AM:

More than 6 year after, it seems the bug remain in Firefox, or so it seems.

Thanks for the tip, it's still working.

Permalink

GregTampa on March 25, 2011 at 2:42 PM:

You shouldn't use img maps anyways, learn to style your page correctly. Anchor a complete image not part of it. If anything split the image up and then link the cutouts that you need anchored.

Permalink

Jessica on May 04, 2011 at 10:54 AM:

Thank you! I was getting so frustrated!

Permalink

High PR Niche Relevant backlinks on September 08, 2016 at 4:12 AM:

I experience considerable difficulties my considerations on substance, however I truly felt I ought to here. Your article is truly awesome. I like the way you composed this data.

Permalink

Post Comments

If you feel like commenting on the above item, use the form below. Your email address will be used for personal contact reasons only, and will not be shown on this website.

Name:

Email Address:

Website:

Comments:

Check this box if you hate spam.