Image Maps
I can't get my image map to validate in XHTML1.1. Please help me figure this out.
Page: http://www.allthevoicesinmyhead.com/contact.php
(the image map is the email address)
The code I used is
<map id="map" name="map">
<area shape=rect coords="40,60,400,90" href="mailto:[email protected]" alt="Click Here To Send Me An Email" />
</map>
<div id="content_BR"><img src="/images/contact_R.gif" width="400" height="278" alt="Contact" title="Contact" usemap="#map" style="border: none" /></div>The validation page: http://validator.w3.org/check?uri=http%3A%2F%2Fwww.allthevoicesinmyhead.com%2Fcontact.php
-------------------
P.S. border="0" is not xhtml valid because it is a MS code. I used style="border:none" which works fine, but rather than put that on every link on every page, I wanted to put that in the css for the div that contains those links. It doesn't work when I put it in the css (id="content_BR"). Any reason why?
Busy posted this at 23:18 — 10th October 2004.
He has: 6,151 posts
Joined: May 2001
your missing quotes around shape="rect"
area tag needs to be closed
try remove the id="map" from map tag
put the div above the map tag
Been a while since I've done an imagemap but you may also have to add a default, try the above first and see what errors, if any you get.
As for the id for border, try class, not id if using for more than one time use.
border="0" is valid
Suzanne posted this at 00:35 — 11th October 2004.
She has: 5,507 posts
Joined: Feb 2000
No underscores are allowed in CSS names, dude.
Busy posted this at 09:29 — 11th October 2004.
He has: 6,151 posts
Joined: May 2001
come to think about it, why use an image map for this anyway, it's totally pointless. A linked image does the same thing, either way your email addres is hardcoded.
fifeclub posted this at 13:34 — 11th October 2004.
He has: 688 posts
Joined: Feb 2001
Interesting. I don't doubt your knowledge but I use underscores within CSS names all the time and that's never caused a validation problem. Here's a validation link to one of the other pages that use an underscore for two different sections.
I was thinking about, and I'm still considering just linking the images but then I would need to carve up all of my images into smaller pieces. As I'm doing it now, all the 'right-side-content' graphics on each page are one of two sizes to make CSS coding simpler. That was just my thought process but if it's not going to validate than I may as well go back to the carved up method.
I'll try that recommendation when I get a chance to work on it tonight. Regarding the border, I am using the ID instead of class because that 'tag' (content_BR) is only being used once per page but it is being used on multiple pages. As I understood it, that's okay, right? And it's just that I can't use the same ID= on the same page, right?
Suzanne posted this at 22:33 — 11th October 2004.
She has: 5,507 posts
Joined: Feb 2000
You should always doubt someone else's knowledge if you can test it! More on the specifics (search for "underscore CSS naming" and you'll get some hacks as well).
Yes, you can use an ID for something that is unique on the page but used on many pages. That's perfect usage.
The errors on your page are simple -- don't use name in the map element, use quotes around attribute values, and use usemap="map" -- where's the problem?
fifeclub posted this at 05:18 — 12th October 2004.
He has: 688 posts
Joined: Feb 2001
Thanks.
Just moments ago I switched back to using straight forward cut-up images instead of image maps so the links in my original post won't show any examples anymore. But thanks for the help. I still use image maps on two other sites and I will definitely need to get those sites "upgraded" to XHTML 1.1 valid sooner or later, so that info will come to good use.
Want to join the discussion? Create an account or log in if you already have one. Joining is fast, free and painless! We’ll even whisk you back here when you’ve finished.