image map responsive {css responsive map}

by Emmanuel Garcia

HTML

<div id="map">
    <img src="http://www.wpclipart.com/toys/blocks/abc_blocks.png">
    <area href="#" style="top:55%;left:5%">
    <area href="#" style="top:20%;left:30%">
</div>

CSS

#map{
    position: relative;
}

#map > img {
  width: 100%;
}

#map > area{
    height:28%; 
    width:25%;
    position: absolute;
    display:block; 
    background:rgba(0,255,0,0.5);
}

JavaScript

//html pure, but not responsive:
//http://jsfiddle.net/lucasfogliarini/G7Ubc/
//
//
// note: http://stackoverflow.com/questions/7844399/responsive-image-map#answer-8591448