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