Search code examples
cssimageanchorresponsive-designimagemap

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.


Solution

  • 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.