自适应CSS图像锚标签-图像地图样式 [英] Responsive CSS Image Anchor tags - Image Maps style
问题描述
我一直在响应式网站上工作，但是Image Maps出现了一些问题.图像地图似乎无法与基于百分比的坐标一起使用. 经过一番谷歌搜索后，我发现了一个JS解决方法- http://mattstow.com/experiment/response-image-maps/rwd-image-maps.html . 但是我希望该网站在禁用JS的情况下工作.
I've been working on a responsive site and have come to a bit of a problem with Image Maps. It seems that Image Maps don't work with Percentage based co-ordinates. After a bit of googling I found a JS workaround - http://mattstow.com/experiment/responsive-image-maps/rwd-image-maps.html. However I want the site to work with JS disabled.
因此，在用尽所有可能性之后，我决定考虑在图像上使用相对定位的Anchor标签来执行相同的操作.无论如何，这是一个更好的选择. 我曾尝试根据位置和大小的百分比将锚定标签放置在图像上，但是每当我重新缩放浏览器时，锚定标签就会不成比例地移动到图像上.
So after exhausting those possibilities I decided to look into using relatively positioned Anchor tags over the images to do the same thing. This is a better option anyway IMO. I've tried to place the anchor tags over the image with percentage based position and size, but whenever I rescale the browser the anchor tags move disproportionately to the image.
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框的大小时，所有内容都会倾斜.
Here's a jsFiddle to describe what I mean - http://jsfiddle.net/wAf3b/10/. When I resize the HTML box everything becomes skewed.
非常感谢您的帮助.
推荐答案
在您发布的小提琴中，您的CSS遇到了一些问题(以及缺少的div结束标记).确保#block相对放置，而不是100％高度，并且您的锚固定在块上/绝对位置后，我就能使标签随块一起移动.
You had a few problems with your CSS in the fiddle you posted (as well as a missing closing div tag). After making sure that #block was relatively positioned, not 100% height, and that your anchors were block/absolutely positioned, I was able to get the tags to move with the blocks.
这是更新的小提琴:
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的使用.由于某些原因，某些浏览器在不使用大写字母时不喜欢它.
One important thing to note with the new html is the use of DOCTYPE. For some reason, some browsers don't like it when it is not capitalized.
这篇关于自适应CSS图像锚标签-图像地图样式的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
