image map responsive {css responsive map}

Mapa con links responsive

by Emmanuel Garcia

HTML

<div id="map">
    <img src="http://travelraintree.com/delete/raintree-resorts.jpg">
    <area shape="circle" rel="relativeanchor" href="#section-whistler-resorts" style="top:2%;left:22.5%" alt="Whistler Resorts">
    <area shape="circle" rel="relativeanchor" href="#section-sandcastle-at-birch-bay" style="top:5%;left:20.5%" alt="Sandcastle at Birch Bay">
    <area shape="circle" rel="relativeanchor" href="#section-teton-club" style="top:17%;left:33.5%" alt="Teton Club">
    <area shape="circle" rel="relativeanchor" href="#section-park-plaza" style="top:23.7%;left:29.3%" alt="Park Plaza">
    <area shape="circle" rel="relativeanchor" href="#section-the-miners-club" style="top:26.5%;left:31.2%" alt="The Miners Club">
    <area shape="circle" rel="relativeanchor" href="#section-franz-klammer-lodge" style="top:33.6%;left:34%" alt="Franz Klammer Lodge">
    <area shape="circle" rel="relativeanchor" href="#section-the-river-club" style="top:34.8%;left:37.5%" alt="The River Club">
    <area shape="circle" rel="relativeanchor" href="#section-polo-towers" style="top:36.4%;left:25.5%" alt="Polo Towers">
    <area shape="circle" rel="relativeanchor" href="#section-cimarron-golf-resort" style="top:39.7%;left:22.5%" alt="Cimarron Golf Resort">
    <area shape="circle" rel="relativeanchor" href="#section-worldmark" style="top:43.6%;left:29.3%" alt="WorldMark Phoenix South Mountain Preserve">
    <area shape="circle" rel="relativeanchor" href="#section-kona-reef" style="top:52%;left:13.1%" alt="Kona Reef"> 
    <area shape="circle" rel="relativeanchor" href="#section-cr-los-cabos" style="top:66.2%;left:28.5%" alt="Club Regina Los Cabos">
    <area shape="circle" rel="relativeanchor" href="#section-cr-puerto-vallarta" style="top:72.3%;left:35.6%" alt="Club Regina Puerto Vallarta">
    <area shape="circle" rel="relativeanchor" href="#section-vv-puerto-vallarta" style="top:76.3%;left:35.9%" alt="Villa Vera Puerto Vallarta">
    <area shape="circle" rel="relativeanchor"...

CSS

#map{
    position: relative;
}

#map > img {
  width: 100%;
}

#map > area{
    height:4%; 
    width:4%;
    border-radius: 50%;

    position: absolute;
    display:block; 
    background:rgba(0,49,89,0.2);
}

JavaScript

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