个人中心
文章发布
退出
作者热门文章
- html - 出于某种原因，IE8 对我的 Sass 文件中继承的 html5 CSS 不友好？
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景？
26
4
我正在尝试显示带有可点击区域的图像，它在图像底部为每个可点击区域显示不同的文本描述。这是我的代码:
编辑:我也不知道如何让这段代码正确显示，抱歉 :(
<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，因为我对它几乎一无所知。
最佳答案
这在 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 中包含这两个脚本，无需任何进一步修改，您的网站就可以正常工作。
关于html - Imagemap:点击显示文字，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/38693998/
26
4
0
我必须要绘制带有菜单栏悬停效果的图像 map ，例如 URL:http://www.99acres.com/paras-seasons-sector-168-noida-npxid-r6378e 问题
我正在尝试显示带有可点击区域的图像，它在图像底部为每个可点击区域显示不同的文本描述。这是我的代码: 编辑:我也不知道如何让这段代码正确显示，抱歉 :( a .img { bo
我有一个像下面这样的图像映射，一个地方在另一个地方，如下所示: 如何在不选择内部的情况下获取外部坐标。我正在使用这个 Link获取 map 的坐标。 (即，当鼠标悬停在不应显示 Upperhanove
我想用几个区域创建图像 map 。 我希望在越过形状时显示文本(如提示)。你能告诉我问题出在哪里吗？我找到了结合 css/javascript 的解决方案，但我更喜欢最简单的解决方案。 谢
我正在寻找一种方法，使我的动态缩放图像适合我正在制作的图像 map 。我使用 jquery 根据窗口大小缩放图像: $(window).bind("load resize", function(){
我不确定我是否在这里遗漏了什么，但似乎我无法将图像映射放在其他所有内容之上(就 z-index 而言)。我尝试改变 HTML 元素定义的顺序，我尝试使用 CSS 来定义适当的 z-index 值，但这
我有以下问题。我正在使用 jQuery Mobile 编写一个网站(数据来自 drupal cms)。 我目前最大的问题是，我有一张图像，用户应该可以触摸该图像以获取更多信息。问题是，当设备旋转时，图
我想创建一个 map ，其中的各个部分根据输入表单上的复选框选择分配颜色。我读过的大部分内容都描述了可单击的图像映射，这些图像映射在单击或悬停时改变颜色。这对于我的 map 来说不是必需的。目的是保存
对于待开发的页面，我正在尝试将 jQuery/jQueryUI 函数和插件(“可拖动”和“maphighlight”)与图像映射和 CSS 动画缩放相结合，这些缩放是通过单击时通过 jQuery 添加
我有一个放在 div 中的 imageMap。单击特定区域时，我需要显示一个叠加层，这是我在使用绝对坐标创建 div 的帮助下完成的。我只使用图像而不使用其他标签创建了绝对坐标。 当网页只有图片标签时
我想将图像映射转换为 svg，因为图像映射不会随着浏览器大小的变化而调整大小。如何更改坐标和标签？ 最佳答案 相当于你的 map ...
我有一个矢量插画文件，其中加利福尼亚州的所有县都是不同的路径。我需要让这些县链接到其他在线页面。有没有办法从这个文件自动生成 HTML 图像映射？ illustrator 提供导出为 jpg 功能，该
我有一个包含 300-400 个多边形区域的图像映射，在事件“onclick”时应该突出显示该区域并获取一些数据等...加载页面时(我的图像有点大，3-5MB)所以我调整了大小这些图像映射使用 dav
我正在努力实现以下目标: 假设一个包含 50 个不同的其他 png 文件的大 png(透明背景 16000 x 70px)... 我需要加载该 png 并从中提取单个 png(最好是例如具有一种我可以
我有一个 ImageMap 叠加层，如下所示: var options = { getTileUrl: function(coord, zoom) { return myUrl
我有一个 Sprite ，单击它时应该打开 htm 帮助文件或视频，具体取决于单击的位置。 我尝试过 asp.net 图像 map 和客户端 map ，有或没有 window.open 以及发送到 j
我正在开发一个应用程序，该应用程序将从图像 map 中识别元素中获益。您可以使用此代码在 asp.net 站点上轻松创建图像映射。 您可以更改图像以显示热点位置，但在这种情况下，通过鼠标悬停或边
我正在为一个客户端编写一个模型(使用 HTML、JS/jQuery)和 CSS，其中涉及(界面的)单个图像并应用了 Map。由于我不会解释的原因，当单击某个区域时会执行包括动画的操作，然后更改图像 s
我是一名优秀的程序员,十分优秀！