www.webdeveloper.com
Results 1 to 2 of 2

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

  1. #1
    Join Date
    Oct 2010
    Posts
    12

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

    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

  2. #2
    Join Date
    Apr 2003
    Location
    Netherlands
    Posts
    21,654
    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?
    At least 98% of internet users' DNA is identical to that of chimpanzees

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles