个人中心
gpt4 book ai didi

css - 响应式 CSS 图像 anchor 标记 - 图像映射样式

转载 作者：技术小花猫 更新时间：2023-10-29 11:35:47 25 4
gpt4 key购买 nike

我一直在开发一个响应式网站，但在使用图像 map 时遇到了一些问题。图像 map 似乎不适用于基于百分比的坐标。经过一番谷歌搜索后，我找到了一个 JS 解决方法 - http://mattstow.com/experiment/responsive-image-maps/rwd-image-maps.html .但是我希望网站在禁用 JS 的情况下工作。

因此，在尝试了所有这些可能性之后，我决定研究在图像上使用相对定位的 anchor 标签来做同样的事情。无论如何，这是一个更好的选择。我尝试将 anchor 标记放置在基于百分比的位置和大小的图像上，但每当我重新缩放浏览器时， anchor 标记都会不成比例地移动到图像上。

HTML:

<div id="block">
  <div>
    <img src="http://www.wpclipart.com/toys/blocks/abc_blocks.png">
  </div>
  <a href="#" class="one"></a>
  <a href="#" class="two"></a>
</div>

CSS:

#block img {
  max-width: 100%;
  display: inline-block;
}

a.one{ 
  height:28%;
  width:19%;
  top:-36%;
  left:1%;
  position:relative;
  display:block;
}
a.two{
  height:28%;
  width:19%;
  top:37%;
  left:36%;
  position:absolute;
}

这里有一个 jsFiddle 来描述我的意思 - http://jsfiddle.net/wAf3b/10/ .当我调整 HTML 框的大小时，一切都变得倾斜。

非常感谢任何帮助。

最佳答案

您发布的 fiddle 中的 CSS 存在一些问题(以及缺少结束 div 标记)。在确保 #block 是相对定位的，而不是 100% 高度，并且你的 anchor 是 block /绝对定位后，我能够让标签随 block 移动。

这是更新后的 fiddle :

http://jsfiddle.net/wAf3b/24/

CSS

html, body {
  height: 100%;
}

#block{ float:left; width:100%; max-width: 400px; position: relative; }

#content{
  height: 100%;
  min-height: 100%;
}

#block img {
  max-width: 100%;
  display: inline-block;
}

a.one{ height:28%; width:25%; position: absolute; top:55%; left:5%; display:block; background:rgba(0,255,0,0.5);}
a.two{ height:28%; width:25%; position: absolute; top:60%; left:70%; display: block; background:rgba(255,0,0,0.5);}

HTML

<!DOCTYPE html>
<html>
<head>
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <link href="stylesheets/screen.css" media="screen, projection" rel="stylesheet" type="text/css" />
    <title>Bulky Waste</title>
</head>
<body>
    <div id="content">
        <div id="block">
            <div>
                <img src="http://www.wpclipart.com/toys/blocks/abc_blocks.png">
            </div>
            <a href="#" class="one"></a>
            <a href="#" class="two"></a>
        </div>
    </div><!--/content-->
</body>
</html>

新 html 需要注意的一件重要事情是 DOCTYPE 的使用。出于某种原因，有些浏览器不喜欢它不大写。

关于css - 响应式 CSS 图像 anchor 标记 - 图像映射样式，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/13500015/

25 4 0
文章推荐： c - 调用 execv 后的奇怪行为
文章推荐： html - 将一个 div 排列在另一个下方
文章推荐： linux - 将 stderr 和 stdout 写入一个文件，但也将 stderr 写入另一个文件
文章推荐： jquery - 使用 jquery 获取元素的边距大小
技术小花猫
个人简介

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

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