个人中心
gpt4 book ai didi

html - 图像映射在 Chrome 和 FireFox 中工作，但在 IE 中不工作

转载 作者：行者123 更新时间：2023-11-28 17:11:19 25 4
gpt4 key购买 nike

大家好，这个问题已经困扰我好几个星期了。出于某种原因，我的图像映射在 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>

最佳答案

您的错误出在坐标属性中。 IE 不能很好地处理错误，坐标需要数值，而是得到两个坐标后跟一个新行。

要更正此问题，只需将整个坐标列表放在一行即可。

像这样:

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

编辑*拼写

关于html - 图像映射在 Chrome 和 FireFox 中工作，但在 IE 中不工作，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/29131300/

25 4 0
文章推荐： javascript - 返回参数显示对象Object
文章推荐： html - CSS/HTML - Viewport 元标记会完全破坏我的网站样式吗？
文章推荐： javascript - 排序和合并数组
文章推荐： html - 由于 bootstrap3 中的 class= 'hidden-xs col-sm-3'，需要删除 slider 上的填充
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com