Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

Register Log in
  • Congratulations gkittelson on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

usemap and XHTML problem

Status
Not open for further replies.
gohankid77

gohankid77

Technical User
Jun 28, 2004
65
US
In the past I've used image maps in HTML. Unfortunately in XHTML, my syntax is considered incorrect by the W3C validator. I have tried removing the # from the usemap value, and now the image map doesn't work. Can somebody help?
 
Sort by date Sort by votes
Can you paste into this thread your HTML for:[ul]
[li]The image[/li]
[li]The image map, including some of the <area> elements[/li]
[/ul]

It's often easier to identify the problem when we can see the code fragment concerned.

<marc> i wonder what will happen if i press this...[ul][li]please tell us if our suggestion has helped[/li][li]need some help? faq581-3339[/li][/ul]
 
Upvote 0 Downvote
First of all, I would like to say that I was simply trying to convert my way of thinking from HTML 4.01 Strict to XHTML 1.1 . This problem is the only thing that still puzzles me about XHTML.

<!-- HTML 4.01 Strict Valid Version -->
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "<html>
<head>
<title>Hello!</title>
<meta http-equiv="content-type" content="text/html; charset=windows-1252">
</head>
<body style="background-color: #00ffff; color: #0000ff">
<h1><a href="#k">Within!</a>&nbsp;<a href="<p>a&nbsp;</p>
<p><img usemap="#doodles" style="border-width:0px" src="packages.jpg" alt="packages"></p>
<p>b&nbsp;</p>
<p>c&nbsp;</p>
<p>d&nbsp;</p>
<p>e&nbsp;</p>
<p>f&nbsp;</p>
<p>g&nbsp;</p>
<p>h&nbsp;</p>
<p>i&nbsp;</p>
<p>j&nbsp;</p>
<p><a name="k"></a>Within the page</p>
<p>
<map name="doodles">
<area shape="rect" alt="Package 58" coords="290,75,310,95" href="doodle.html">
<area shape="rect" alt="Hyman Stadium" coords="69,10,215,42" href="doodle2.html">
</map>
</p>
</body>
</html>


<!-- XHTML 1.1 Valid Version -->
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "<html xmlns=" xml:lang="en">
<head>
<title>Hello!</title>
<meta http-equiv="content-type" content="text/html; charset=windows-1252" />
</head>
<body style="background-color: #00ffff; color: #0000ff">
<h1><a href="#k">Within!</a>&nbsp;<a href="<p>a&nbsp;</p>
<p><img usemap="doodles" style="border-width:0px" src="packages.jpg" alt="packages" /></p>
<p>b&nbsp;</p>
<p>c&nbsp;</p>
<p>d&nbsp;</p>
<p>e&nbsp;</p>
<p>f&nbsp;</p>
<p>g&nbsp;</p>
<p>h&nbsp;</p>
<p>i&nbsp;</p>
<p>j&nbsp;</p>
<p><a id="k"></a>Within the page</p>
<p>
<map id="doodles">
<area shape="rect" alt="Package 58" coords="290,75,310,95" href="doodle.html" />
<area shape="rect" alt="Hyman Stadium" coords="69,10,215,42" href="doodle2.html" />
</map>
</p>
</body>
</html>

I hope you can help me. Thanks.
 
Upvote 0 Downvote
Ah, the offending line of code:
Code: 
<map id="doodles">
should be
Code: 
<map [COLOR=red]name[/color]="doodles">

(and yes - it is [tt]usemap="#doodles"[/tt])

<marc> i wonder what will happen if i press this...[ul][li]please tell us if our suggestion has helped[/li][li]need some help? faq581-3339[/li][/ul]
 
Upvote 0 Downvote
I know it works in HTML and XHTML 1.0 Strict, but not in XHTML 1.1. I tried your suggestion, and it didn't work for validation, of course. So I checked out the XHTML 1.1 DTD. The NAME attribute was replaced by the ID attribute just like in every other element as I thought (except for the <object> and <input> elements as I discovered).
In the Image Module of the XHTML 1.1 DTD, the USEMAP attribute for the <img> tag is not present! They were planning on modifying the attribute list to allow for client-side image maps but didn't get around to it, I guess. Thanks for your help, it was much appreciated.
 
Upvote 0 Downvote
I just sent an e-mail to the W3C about the missing USEMAP attribute. Hopefully, they will correct it.
 
Upvote 0 Downvote
<aside>
surrounding code fragments with [ignore]
Code:
[/ignore] puts it into that seperate box effect....much more readable :)
</aside>

my apologies - I missed the XHTML 1.1 bit. I'm too used to thinking in terms of XHTML 1.0.

Now that I've noticed it, my first thought is: is the server sending the correct mime type?

The W3C on Mime Types.
XHTML 1.1 should be application/xhtml+xml
XHTML 1.1 may be application/xml
XHTML 1.1 may be text/xml
XHTML 1.1 SHOULD NOT be text/html

Unfortunately, when I last checked, Moz was the only browser to render application/xml; all the other browsers popped up a 'save as' dialogue box. This is why I've stuck with XHTML 1.0 strict. Given that 90% of users are still on some form of IE, I guess I really do have to accommodate them.

What browser are you testing with?

<marc> i wonder what will happen if i press this...[ul][li]please tell us if our suggestion has helped[/li][li]need some help? faq581-3339[/li][/ul]
 
Upvote 0 Downvote
Yes, I checked out other forums and found a site that had several reasons to use application/xhtml+xml rather than text/html. It was at . I decided to change it after reading that. I tested for validity with the usemap and it still didn't work. So I sent an e-mail to the W3C about the missing USEMAP attribute and decided to just remove the image and image map. It was just a test page to show stuff to other people. I'm trying to create a FAQ, a tag list with their attributes, etc. for XHTML 1.1 like w3schools did with XHTML 1.0, HTML, XML, DHTML, Blah, blah, and XSL. I'll just stick with XHTML 1.0 Strict for creating image maps. Thanks for your help, manarth.
 
Upvote 0 Downvote
Status
Not open for further replies.

Similar threads

cae154
  • Locked
  • Question
Body of email not appearing in correct font on iPhone and iPad
Replies
1
Views
825
spamjim
spamjim
lmcate
  • Locked
  • Question
From HTML Page open an MDB files on the server and work
Replies
0
Views
233
lmcate
lmcate
PeDa
  • Locked
  • Question
Horizontal rule and CSS problem 2
Replies
2
Views
703
PeDa
PeDa
jason.lex
  • Locked
  • Question
Bootstrap grid and columns question
Replies
0
Views
152
jason.lex
jason.lex
jason.lex
  • Locked
  • Question
iPhone browsers (chrome and safari) output different compared to other browsers 1
Replies
2
Views
159
jason.lex
jason.lex

Part and Inventory Search

Sponsor

Back
Top