Image Map without name attribute will not work in Firefox - is there a fix?

**Novice2010** · 11-27-2010, 01:30 AM

I have an image map. I need to use XHTML 1.1 for this project and the code must validate.

The problem is, XHTML 1.1 no longer supports the Name Attribute, it will not validate any code containing the Name Attribute.

If I remove the Name Attribute, the image map does not work in FireFox.

Are there any means or other method to make this work in Firefox without the Name Attribute?

Here is the code for reference:

Code:

<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>

<script type="text/javascript">

var koalaEar = "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(genText){
document.getElementById('displayMsg').innerHTML="" + genText + "";
}
function defaultMsg(){
document.getElementById('displayMsg').innerHTML="Hi! I'm Dick the Kola.";
}

	

</script>
</head>
<body>
<div id="displayMsg" style="color: #000; font-size: 24px;">Hi! I'm Dick the Kola.</div>

<img src="Koalav1a.jpg" width="600" height="450" id="Koalav1a" usemap="#Koalav1a" alt="" />
<p>
<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(koalaEar);" 
onmouseout="defaultMsg();" />


<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="defaultMsg();" />


<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="defaultMsg()" />


<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="defaultMsg();" />


<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="defaultMsg();" />


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

Thanks everyone!

Nov

**Fang** · 11-27-2010, 04:30 AM

It does work without name attribute if you send the document as application/xhtml+xml
If you are not sending xhtml correctly, then why use it?

Thread: Image Map without name attribute will not work in Firefox - is there a fix?

Thread Tools

Display

Image Map without name attribute will not work in Firefox - is there a fix?

Thread Information

Users Browsing this Thread

Bookmarks

Bookmarks

Posting Permissions