CODEWITHSUNDEEP
htmlcss
James DuBois
James DuBois

Reputation: 53

Image Map is Working in Chrome and FireFox but not IE

Hey guys this problem has been getting at me for weeks. For some reason my image map it not working in internet explorer and is in Firefox and chrome. Can you guys check my code and see why its not working please. At first I forgot the # sign in usemap"#". Even after I put that fix in, it still wont work in IE. Thank you for your time and I look forward to your response.

<!DOCTYPE html>
<html>

   <head>
   <!--
      New Perspectives on HTML
      Tutorial 2
      Case Problem 3

      ElectionWeb Kansas Page
      Author: James DuBois
      Date:   2/10/2015


      Filename:         kansas.htm
      Supporting files: ewlogo.png, ewstyles.css, kansasmap.png, modernizr-1.5.js
   -->
<!-- did you test it?. imagemap not working -->

      <meta charset="UTF-8" />
      <meta name="author" content="James DuBois"/>
      <meta name="keywords" content="Kansas, elections"/>
      <a href="http://www.kssos.org/elections/elections_statistics.html" rel="external"></a>
      <base target="new">
      <title>Kansas Congressional Elections</title>

      <script src="modernizr-1.5.js"></script>
      <link href="ewstyles.css" rel="stylesheet" type="text/css" />
   </head>

   <body>
      <header>
         <img src="ewlogo.png" alt="ElectionWeb" />
      </header>

         <nav>
            <h2>New Sources</h2>
               <ul>
                   <a href="http://news.yahoo.com/" rel="external"><li>Yahoo News</li></a>
                   <a href="http://www.foxnews.com/" rel="external"><li>FOX News</li></a>
                  <a href="http://www.cnn.com/" rel="external"><li>CNN</li> </a>
                  <a href="http://www.msnbc.com/" rel="external"><li>MSNBC</li></a>
                  <a href="https://news.google.com/" rel="external"><li>Google News</li></a>
                  <a href="http://www.nytimes.com/" rel="external"><li>New York Times</li> </a>
                  <a href="http://digg.com/" rel="external"><li>digg</li> </a>
                  <a href="http://www.washingtonpost.com/" rel="external"><li>Washington Post</li> </a>
                  <a href="http://www.latimes.com/" rel="external"><li>LATimes</li> </a>
                  <a href="http://www.reuters.com/" rel="external"><li>Reuters</li> </a>
                  <a href="http://abcnews.go.com/" rel="external"><li>ABCNews</li> </a>
                  <a href="http://www.usatoday.com/" rel="external"><li>USA Today</li> </a>
               </ul>

         </nav>

      <section>
         <h1>Kansas Statewide Races</h1>
         <p>The Kansas Election polls have officially been closed now for two hours 
            and results are being constantly updated. As of 10pm with 65% of the
            ballots counted, leaders in the state-wide races for governor and 
            senator are as follows:
         </p>
         <h2>Governor (65% reporting)</h2>
         <ul>
            <li>Charles Young (R) - 371,885 (47%)</li>
            <li>Karen Drew (D) - 356,060 (45%)</li>
            <li>Barry Davis (I) - 39,562 (5%)</li>
         </ul>
         <h2>U.S. Senate (65% reporting)</h2>
         <ul>
            <li>&#10004; Helen Sanchez (D) - 387,710 (49%)</li>
            <li>Linda Epstein (R) - 348,147 (44%)</li>
            <li>Hunter Ryan (I) - 47,474 (6%)</li>
         </ul>
         <p>Get up-to-the-minute election results from the Kansas
            <a href="http://www.sos.ks.gov/">Secretary of State. </a>
         </p>
      </section>

      <figure>
         <img src="kansasmap.png"  alt="Kansas" usemap="#kansasdistricts"/>
                  <map name="kansasdistricts">
            <area shape="poly" coords="18,10,
                                          457,16,
                                          424,54,
                                          372,56,
                                          372,99,
                                          447,100,
                                          452,203,
                                          411,205,
                                          411,188,
                                          370,189,
                                          325,184,
                                          326,220,
                                          267,221,
                                          270,289,
                                          6,282" 
                  href="district1.htm" target="_self"/>


            <area shape="poly" coords="466,14,
                                          427,57,
                                          375,59,
                                          375,99,
                                          457,99,
                                          456,252,
                                          489,252,
                                          487,291,
                                          551,285,
                                          547,126,
                                          513,126,
                                          491,102,
                                          522,99,
                                          531,81,
                                          510,52,
                                          527,25" 
                  href="district2.htm" target="_self"  />

            <area shape="poly" coords="535,83,
                                          525,106,
                                          501,105,
                                          519,127,
                                          546,123,
                                          546,90" 
                  href="district3.htm" target="_self" />

            <area shape="poly" coords="276,291,
                                          273,224,
                                          330,223,
                                          328,187,
                                          408,194,
                                          408,209,
                                          454,207,
                                          454,258,
                                          486,256,
                                          484,293" 
                  href="district4.htm" target="_self" />
         </map>
         <figcaption>Click to view congressional district results</figcaption>
      </figure>

      <footer>
         ElectionWeb: Your Source for Online Election Results
      </footer>

   </body>

</html>

Upvotes: 1

Views: 388

Answers (1)

iJakeUjake
iJakeUjake

Reputation: 118

Your error is in the coords attribute. IE does not work well with errors and coords expects numerical values but instead is getting two coords followed by a new line.

To correct this just put the entire coords list on one line.

Like so: 

<img src="iphone.jpg"  alt="Kansas" usemap="#kansasdistricts"/>
              <map name="kansasdistricts">
        <area shape="poly" coords="18,10, 457,16,424,54,372,56,372,99,447,100,452,203,411,205,411,188,370,189,325,184,326,220,267,221,270,289,6,282" href="district1.htm" target="_self" alt="test"/>


        <area shape="poly" coords="466,14,427,57,375,59,375,99,457,99,456,252,489,252,487,291,551,285,547,126,513,126,491,102,522,99,531,81,510,52,527,25" href="district2.htm" target="_self" alt="test"/>

        <area shape="poly" coords="535,83,525,106,501,105,519,127,546,123,546,90" href="district3.htm" target="_self" alt="test"/>

        <area shape="poly" coords="276,291,273,224,330,223,328,187,408,194,408,209,454,207,454,258,486,256, 484,293" href="district4.htm" target="_self" alt="test"/>
     </map>

Edit* spelling

Upvotes: 1

Related Questions