响应式 CSS 图像锚标记 - 图像映射样式答案

【问题标题】：Responsive CSS Image Anchor tags - Image Maps style响应式 CSS 图像锚标记 - 图像映射样式
【发布时间】：2012-11-10 02:28:04
【问题描述】：

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

所以在用尽了这些可能性之后，我决定研究在图像上使用相对定位的 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 框的大小时，一切都变得倾斜了。

非常感谢任何帮助。

【问题讨论】：

尝试使用 margin-left 和 margin-top 而不是 top 和 left。

标签： css image anchor responsive-design imagemap

【解决方案1】：

在您发布的小提琴中，您的 CSS 存在一些问题（以及缺少结束 div 标记）。在确保 #block 相对定位，而不是 100% 高度，并且您的锚点是块/绝对定位后，我能够让标签随块移动。

这是更新后的小提琴：

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。由于某些原因，有些浏览器不喜欢它不大写。

【讨论】：

@Jawad 谢谢你的链接。我个人认为 DOCTYPE 声明也是不区分大小写的，但大约一年前有一个问题通过大写来解决。
时代如何变化？仅仅几年前，每个人都在回避 html 而更喜欢 XHTML。现在每个人都回到了 HTML5 语法的行列。
@Jawad 同意。 HTML5 似乎有一些相当不错的特性。期待尽快全面实施 HTML5 规范。
这是一个讽刺的评论！我仍然用 /> 关闭我的空元素，我仍然对标签/元素和属性使用小写字母，我仍然以相反的顺序关闭元素/标签，并且我仍然提供 type 属性，而使用 html 的 MIME 类型而不是 application+ xml - 多语言 - w3.org/TR/2012/WD-html-polyglot-20121025
@Jawad 我喜欢页面底部的“这是一项正在进行的工作”警告。

【解决方案2】：

绝对定位元素不再是布局的一部分，因此它们不能从其父元素继承相对尺寸属性。你需要 JavaScript 来做你想做的事。

禁用 JS 的人已经预料到体验会下降。

【讨论】：