Image Map not working in Firefox without name attribute

JavaScript
1

I am working on an Image Map project, the project must be written under xhtml 1.1 and must validate.
The problem is Firefox and Safari will not support the image map without the name attribute, internet explorer does.

If I add a name attribute to the image map, the code will not validate under xhtml 1.1.

Is there any way to have this work without the name attribute in FF and Safari?

The inline styles will be remove later and I would also like to replace the variables with an array but for now the focus is on
getting this to work in FF without the name attribute. I can just change the doctype to transitional but we have to use xhtml1.1.

Here is the code:


<script type="text/javascript">

var koalaMouth = "This is my left ear!";
var koalaLeftEye = "This is my left eye!";
var koalaNose = "That is my nose!";
var koalaMouth = "That is my mouth!";
var koalaRightEye = "And that is my right eye!";


function writetext(message){
document.getElementById('displayText').innerHTML=''+message+'';
}
function defaultText(){
document.getElementById('displayText').innerHTML="Hi! I'm Dick the Kola.";
}

	

</script>
</head>
<body>
<div id="displayText" style="color: #000; font-size: 24px;">Hi! I'm Dick the Kola.</div>
<p>
<img src="Koalav1a.jpg" width="600" height="450" id="Koalav1a" usemap="#Koalav1a" alt="" />

<map id="Koalav1a">

<area shape="poly" coords="105,190,63,148,48,120,63,84,79,63,105,42,148,16,211,6,253,27,284,63,253,97,232,127,224,148,203,181,198,202,148,218,127,204,105,190" href="javascript:void(0);" title="Koala-left-ear" alt="Koala-left-ear" onmouseover="writetext(koalaMouth);" 
onmouseout="defaultText();" />


<area shape="poly" coords="212,224,213,218,217,213,222,209,228,208,234,209,239,213,243,218,244,224,243,230,239,235,234,239,228,240,222,239,217,235,213,230,212,224,212,224" href="javascript:void(0)" title="Koala-left-eye" alt="Koala-left-eye" 
onmouseover="writetext(koalaLeftEye);" onmouseout="defaultText();" />


<area shape="poly" coords="255,252,267,231,292,217,318,231,333,265,325,289,318,315,313,337,297,345,297,345,276,344,265,343,255,337,243,331,242,327,234,315,244,289,255,252" href="javascript:void(0)" title="Koala-nose" alt="Koala-nose" onmouseover="writetext(koalaNose)" onmouseout="defaultText()" />


<area shape="poly" coords="266,382,254,374,246,369,241,358,235,337,285,357,336,336,338,350,322,367,298,382,299,377,293,381,287,382,276,382,276,377,272,382,269,382,266,382" href="javascript:void(0)" title="Koala-mouth" alt="Koala-mouth" onmouseover="writetext(koalaMouth);" onmouseout="defaultText();" />


<area shape="poly" coords="369,251,370,245,374,240,379,236,385,235,391,236,396,240,400,245,401,251,400,257,396,262,391,266,385,267,379,266,374,262,370,257,369,251,369,251" href="javascript:void(0)" title="Koala-right-eye" alt="Koala-right-eye" onmouseover="writetext(koalaRightEye);" onmouseout="defaultText();" />


</map>
</p>
</body>
</html>

Thanks everyone!

Novice

2

<map> just needs an id and not a name to validate as xhtml strict.

but 1 error I can see is that you have 2 elements with the same id which is not allowed. id’s must be unique.

3

Hey Kalon,

Hope all is going well.

Yes, I saw that error and corrected it.

Just so you know it does validate without the name attribute.

However, removing the name attribute cause the code to fail in FF.

It does not work without the name attribute in FF.

Novice

4

yep all is well :slight_smile:

this validates as xhtml strict

 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
<title></title>
<script type="text/javascript">
var koalaMouth = "This is my left ear!";
var koalaLeftEye = "This is my left eye!";
var koalaNose = "That is my nose!";
var koalaMouth = "That is my mouth!";
var koalaRightEye = "And that is my right eye!";
 
function writetext(message){
document.getElementById('displayText').innerHTML=''+message+'';
}
function defaultText(){
document.getElementById('displayText').innerHTML="Hi! I'm Dick the Kola.";
}
</script>
</head>
<body>
<div id="displayText" style="color: #000; font-size: 24px;">Hi! I'm Dick the Kola.</div>
<p>
<img src="Koalav1a.jpg" width="600" height="450" id="[COLOR=red]Koalav1axx[/COLOR]" usemap="#Koalav1a" alt="" />
 
<map [COLOR=red]name="Koalav1a" id="Koalav1a"[/COLOR] >
 
<area shape="poly" coords="105,190,63,148,48,120,63,84,79,63,105,42,148,16,211,6,253,27,284,63,253,97,232,127,224,148,203,181,198,202,148,218,127,204,105,190" href="javascript:void(0);" title="Koala-left-ear" alt="Koala-left-ear" onmouseover="writetext(koalaMouth);" 
onmouseout="defaultText();" />
 
<area shape="poly" coords="212,224,213,218,217,213,222,209,228,208,234,209,239,213,243,218,244,224,243,230,239,235,234,239,228,240,222,239,217,235,213,230,212,224,212,224" href="javascript:void(0)" title="Koala-left-eye" alt="Koala-left-eye" 
onmouseover="writetext(koalaLeftEye);" onmouseout="defaultText();" />
 
<area shape="poly" coords="255,252,267,231,292,217,318,231,333,265,325,289,318,315,313,337,297,345,297,345,276,344,265,343,255,337,243,331,242,327,234,315,244,289,255,252" href="javascript:void(0)" title="Koala-nose" alt="Koala-nose" onmouseover="writetext(koalaNose)" onmouseout="defaultText()" />
 
<area shape="poly" coords="266,382,254,374,246,369,241,358,235,337,285,357,336,336,338,350,322,367,298,382,299,377,293,381,287,382,276,382,276,377,272,382,269,382,266,382" href="javascript:void(0)" title="Koala-mouth" alt="Koala-mouth" onmouseover="writetext(koalaMouth);" onmouseout="defaultText();" />
 
<area shape="poly" coords="369,251,370,245,374,240,379,236,385,235,391,236,396,240,400,245,401,251,400,257,396,262,391,266,385,267,379,266,374,262,370,257,369,251,369,251" href="javascript:void(0)" title="Koala-right-eye" alt="Koala-right-eye" onmouseover="writetext(koalaRightEye);" onmouseout="defaultText();" />
 
</map>
</p>
</body>
</html>
5

Sorry for the confusion but I am referring to XHTML 1.1.

This DocType:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">

It is not the same as Strict, right?

Novice

6

I just tried with xhtml1.1 and yep, the validator doesn’t allow a name attribute in <map>. It only allows an id.

but xhtml1.0 allows both.

so if you must use xhtml1.1 you will have to compromise on browers compatability since FF requires the name attribute.

If it’s any help this is the current w3c recommended list of allowed doctypes.

unless you must use xhtml1.1 then I would suggest using the xhtml1.0 Strict I posted earlier which works ok in all browsers.

7

aaaagh :headbang:

and just found this that confirms the name attribute in <a> and <map> has been removed in xhtml1.1

8

I am just @#$%^ as to why this instructor wants me to do this knowing damn well it will not work and than get all workup if the page does not validate.

Who in the real world does this?

Thanks again for all your help, I’ll be back!

Novice

9

ok, good luck :slight_smile:

give him/her a :whip:

10

I am just @#$%^ as to why this instructor wants me to do this knowing damn well it will not work and than get all workup if the page does not validate.

Who in the real world does this?

Nobody. XHTML1.1 must be sent as application xhtml+xml and Internet Explorer does NOT support that. XHTML1.0 CAN be sent as text/html (which DOES work in IE).

So your instructor is as out of it as expected in educational institutions. Don’t think for one minute that any degree you get from there will open any doors to any jobs. It won’t. The only thing that will is learning from professionals working in the field, because we’re the ones who actually know that XHTML1.1 MUST be sent as real XHTML and not HTML and that nobody does that (at least, not without content negotiation on the server-side to sent HTML to IE, or if the site in question is only presented on a (non-IE) intranet) because it does not work in the real world.
http://www.andyrutledge.com/the-ux-design-education-scam.php

And frankly I thought we left image maps back in the 90’s.

11

nup, I still use them occassionally where appropriate :slight_smile: