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

时间:2020-12-21 20:35:52

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.

嘿伙计们,这个问题一直困扰着我好几个星期。出于某种原因,我的图像映射它无法在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 个解决方案

#1


1  

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.

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

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

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

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

编辑*拼写

#1


1  

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.

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

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

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

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

编辑*拼写