Image Maps, usemap attribute in XHTML 1.1

liunx · Jan 9, 2008

-I have 6 images (img tag) 
-Each image has a usemap attribute 
-The values for usemap are #nav1...#nav6 
 
-I have 6 maps (map tag) 
-Each map has an id attribute 
-The values for id are nav1...nav6 
 
Therefore, I use a URI to direct my images to the map. However, in XHTML 1.1, the value for usemap cannot be a URI value: it must be a IDREF value according to the latest XHTML 1.1 papers at w3.org (whatever IDREF is, I have no idea). Basically when I validate my page, it says that I cannot have the "#" sign, or any "/". 
 
What I need: 
-A way to use my images with their maps, without using # or / in the value of usemap 
 
Specifications: 
-I do not care whether it is client-side or server-side image mapping so ismap or usemap are both accepted (i do not know the difference). 
-If you would like to validate an example image map yourself, you can use <a class="postlink" href="http://validator.w3.org">http://validator.w3.org</a> to validate (check XHTML 1.1). 
 
Example: 
Here is an example of one pair of my image map (ignore the onmouseover/onmouseout attributes, I have a javascript code running over the image maps as well. However, I am 100% sure that they are not the problem. 
 
<img src=http://www.htmlforums.com/archive/index.php/"bank_data.gif" id="img9" usemap="index.html#nav5" style="position:absolute;top:464px;left:5px;border:none;" alt="Database" /> 
<map id="nav5"> 
<area shape="rect" coords="21,1,147,18" href=http://www.htmlforums.com/archive/index.php/"dbl.html" onmouseover="filter('img9','a10');return true" onmouseout="filter('img9','a9');return true;" onclick="window.focus()" alt="Database Languages" /> 
</map> 
 
...and here is the website so far: <a class="postlink" href="http://www.xdemi.com/tutorial">http://www.xdemi.com/tutorial</a> 
the image maps are at the left side, and perfectly functioning with #. the problem is validation. 
 
--------------------------------------------------- 
 
THANKYOU VERY MUCH FOR READING THIS... 
ANYONE WHO HELPS WILL BE GIVEN CREDIT AT MY SITE, ONCE IT IS DONE, SO PLEASE LEAVE A NAME/NICKNAME THAT I CAN USE, NO MATTER HOW BIG OR SMALL YOUR CONTRIBUTION IS. I AM BUILDING A TUTORIAL WEBSITE, WHICH IN THE FUTURE WILL BE <a class="postlink" href="http://www.xdemi.com/tutorial">http://www.xdemi.com/tutorial</a>did you fix the problem? it seems to validate fine... 
<a class="postlink" href="http://validator.w3.org/check?uri=http%3A%2F%2Fxdemi.com%2Ftutorial%2F">http://validator.w3.org/check?uri=http% ... utorial%2F</a>Well I kinda gave up, and switched back to XHTML 1.0, which supports URIs. However, I would greatly appreciate it if you can help me: just click here to validate in XHTML 1.1: 
 
<a class="postlink" href="http://validator.w3.org/check?uri=http%3A%2F%2Fwwww.xdemi.com%2Ftutorial%2Findex.html&charset=%28detect+automatically%29&doctype=XHTML+1.1&verbose=1">http://validator.w3.org/check?uri=http% ... &verbose=1</a> 
 
-or- 
 
1) Go to <a class="postlink" href="http://validator.w3.org">http://validator.w3.org</a> 
2) Click on "Extended Interface" which is under the two input boxes. 
3) Put <a class="postlink" href="http://wwww.xdemi.com/tutorial/index.html">http://wwww.xdemi.com/tutorial/index.html</a> for the first text box 
4) Select XHTML 1.1 for the "Type" selector. 
5) Leaving everything else alone, click "Validate this page" 
 
 
___________________________________ 
You will see 12 errors. 6 errors for using the # sign as usemap values, and 6 errors for directing to the respective id's with #. 
 
 
Thankyou very much,i know i should wait more than just a day, but... oh well lol - i've helped about 7 people, 5 of them with detailed explanations/sample pages on my site, <a class="postlink" href="http://www.xdemi.com/temp">http://www.xdemi.com/temp</a> .... but i haven't gotten much help backI am by no means an expert on the subject of XHTML, but I'm trying to learn it. If I correctly understand what I read, the "usemap" attribute should directly reference an id, which is what IDREF stands for. If you look at the definition of IDREF in the XML 1.0 Recommendation (<a class="postlink" href="http://www.w3.org/TR/2000/REC-xml-20001006#sec-attribute-types">http://www.w3.org/TR/2000/REC-xml-20001 ... bute-types</a>) you'll see that the IDREF value should be identical to the "id" value, which means no "#". So give that a try. I would be interested to know what browsers support this, though. 
 
I hope you stick around and continue helping people. You give very good answers. Your question was quite a bit more advanced than a majority of the questions I see on this board.Thankyou very much for your compliments, and for helping (or at least trying to help) me. I will go test if that works right now, it sounds formidable.No luck. Thanks anyways

I wonder how W3 is hoping to achieve backwards compatibility with this revision... every other tag is baskward compatible in some way. Something's not right here: there has to be an easy method to using image maps. At current status, I can't use <map> at all unless I use XHTML 1.0! Many others have complained and requested help in ther forums. I have seen a few solutions... dealing with DTD modulation that looks like this: 
 
<a class="postlink" href="http://lists.w3.org/Archives/Public/www-html-editor/2002JanMar/2580">http://lists.w3.org/Archives/Public/www ... anMar/2580</a> 
--> 
 
<!ENTITY % Comment-datatypes.mod 
PUBLIC "-//W3C//ENTITIES XHTML Datatypes 1.0//EN" 
"http://www.w3.org/TR/xhtml-modularization/DTD/xhtml-datatypes-1.mod" > 
%Comment-datatypes.mod; 
 
<!ENTITY % xhtml-qname.mod 
PUBLIC "-//W3C//ENTITIES XHTML Qualified Names 1.0//EN" 
"http://www.w3.org/TR/xhtml-modularization/DTD/xhtml-qname-1.mod" > 
%xhtml-qname.mod; 
 
 
<!ATTLIST %img.qname; 
usemap %URI.datatype; #IMPLIED > 
<!ATTLIST %input.qname; 
usemap %URI.datatype; #IMPLIED > 
<!ATTLIST %object.qname; 
usemap %URI.datatype; #IMPLIED > 
 
 
<!ENTITY % xhtml11.dtd 
PUBLIC "-//W3C//DTD XHTML 1.1//EN" 
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd" > 
%xhtml11.dtd; 
 
 
However, this is what I see: 
 
meh? 
 
 
It is way too complicated. I have a habit of not using things that I cannot decipher. As I said before, that whole DTD is foreign to me. 
 
Nonetheless, I'll try the above right now, and report back in a moment what I get.DEFINITELY DO NOT USE 
 
caused 4 more errors than i needed pfft 
 
I've read more forums online, people are all staying with xhtml 1.0 ... if we don't find a good explanation for this, maybe we should start a petition or something and revert usemap back the way it used to be 
 
i mean, their still on their working drafts for 2.0, so maybe we can help some lives (like me) 
 
well whatever, i give up for nowI have been doing a bit of digging and it seems that the change to IDREF broke a lot of browsers. This decision is currently under consideration (<a class="postlink" href="http://lists.w3.org/Archives/Public/www-html/2002Aug/0048.html">http://lists.w3.org/Archives/Public/www ... /0048.html</a>). If you would rather not change the module yourself so that the map works all the time, then your best bet is to stick with XHTML 1.0 until the issue is resolved. As for XHTML 2.0, there will be absolutely no backwards compatability in that, so it will be interesting to see how that is accepted by the community.ouch 
 
thanks for the update, doogxela i'll keep that in mind. i'll post any solutions i find on this forum as a new topic "XHTML 1.1 IDREF" (if i can get any)

Image Maps, usemap attribute in XHTML 1.1

liunx

Guest