图像地图适用于Chrome和FireFox,但不适用于IE

时间:2015-03-18 19:42:42

标签: html css css3

嘿伙计们这个问题已经让我好几个星期了。出于某种原因,我的图像映射它无法在Internet Explorer中工作,并且在Firefox和Chrome中。你们可以检查我的代码,看看为什么它不能正常工作。起初我忘了使用map中的#符号"#"。即使我把它修复后,它仍然无法在IE中工作。感谢您的时间,我期待您的回复。

<!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>

1 个答案:

答案 0 :(得分:1)

您的错误位于coords属性中。 IE不能很好地处理错误,并且coords期望数值,而是获得两个坐标后跟一个新行。

要纠正这个问题,只需将整个coords列表放在一行。

像这样:

<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>

编辑*拼写