文章/答案/技术大牛

发布

社区首页 >问答首页 >Imagemap:单击以显示文本

问Imagemap:单击以显示文本
EN

Stack Overflow用户

提问于 2016-08-01 16:18:24

回答 1查看 323关注 0票数 0

我正在尝试显示一个带有可点击区域的图像，它在图像底部为每个可点击区域显示不同的文本描述。这是我的代码：

编辑:我也不知道如何让这段代码正确显示，对不起:(

<DOCTYPE! html>
<head>
 <style>
    a .img {
     border:none;
    }
    .caption {
     display: none;
        }

    .caption:target {
        display: block;
        position: absolute;
        top: 510;
        text-align: centre;
        }

    body {
        background-color: #1e1e1e;
        color: #ffffff;
        font-family: Trebuchet MS;
        font-size: 16pt;        
        } 

 </style>
</head>
<body>
 <img src="blahblah.png" usemap="#blahblah">
  <map name="blahblah">

  <area shape="rect" coords="XX,XX,XXX,XXX" href="#text1">
    <div class=caption id=text1>
        <u>display some text</u> 
        </div>
    <area shape="rect" coords="XX,XX,XXX,XX" href="#text2">
    <div class=caption id=text2>
        <u>display some other text</u> 
        </div>
</body>
</html>

它在Chrome中运行良好，但我的文本不会出现在IE8中。有没有人能告诉我为什么，或许能给出一个解决方案？尽量避免使用javascript，因为我对它几乎一无所知。

imagemap

html

css

internet-explorer-8

回答 1

Stack Overflow用户

发布于 2016-08-01 18:04:46

这在IE8中不起作用的原因是因为您在CSS中使用了:target选择器。这是IE8中不支持的CSS3选择器。请参阅文档：http://www.w3schools.com/cssref/sel_target.asp

一个简单的解决方法是使用外部Javascript库：selectivizr。

这使得使用任何CSS3属性成为可能。请记住，如果你使用这个，你也需要包括jQuery。

您的HTML将如下所示：

<DOCTYPE! html>
<head>
<!-- CDN VERSION OF jQUERY, You can also download it --> 
<script   src="https://code.jquery.com/jquery-1.12.4.min.js"   integrity="sha256-ZosEbRLbNQzLpnKIkEdrPv7lOy9C27hHQ+Xp8a4MxAQ="   crossorigin="anonymous"></script>
<script type="text/javascript" src="[JS library]"></script>
<!--[if (gte IE 6)&(lte IE 8)]>
  <script type="text/javascript" src="selectivizr.js"></script>
  <noscript><link rel="stylesheet" href="[fallback css]" /></noscript>
<![endif]-->
</head>
<!-- The rest of your HTML -->

如果你只是在你的HTML中包含这两个脚本，没有任何进一步的修改，你的网站就会正常工作。

票数 0

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/38693998

复制

相似问题

问Imagemap:单击以显示文本
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问Imagemap:单击以显示文本EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问Imagemap:单击以显示文本
EN