Responsive CSS Image Anchor tags - Image Maps style

问题

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.

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;
}

Here's a jsFiddle to describe what I mean - http://jsfiddle.net/wAf3b/10/. When I resize the HTML box everything becomes skewed.

Any help much appreciated.

回答1:

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.

Here is the updated 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>

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.

回答2:

Absolutely-positioned elements are no longer part of the layout, so they cannot inherit relative dimensional properties from their parent. You'll need JavaScript to do what you want.

People who disable JS expect a degraded experience already.

来源：https://stackoverflow.com/questions/13500015/responsive-css-image-anchor-tags-image-maps-style

标签

css

image

anchor

responsive-design

imagemap