Untitled

dabblet.css

p {text-align:center;}
.image_map  {width:640px;height:480px;margin:3em auto;}

@media all and (max-width:700px) {
div.image_map {
width:480px;height:360px;overflow:hidden;
position:relative;border:solid red;}
.image_map img, map {position:absolute;transform:scale(0.75);transform-origin:0 0}
 }
 @media all and (max-width:500px) { 
div.image_map {
border:solid blue;
width:320px;height:240px;overflow:hidden;
position:relative;border:solid;}
.image_map img, map {position:absolute;transform:scale(0.5);transform-origin:0 0}
 }

dabblet.html

<div  class="image_map">
<img id="Image-Maps_6201305161140066" src="http://lorempixel.com/640/480/nature/1/" usemap="#Image-Maps_6201305161140066" border="0" width="640" height="480" alt="" />
<map id="_Image-Maps_6201305161140066" name="Image-Maps_6201305161140066">
<area shape="rect" coords="0,0,298,248" href="#" alt="Lien 1" title="Lien 1"    />
<area shape="rect" coords="297,1,635,249" href="#" alt="lien 2" title="lien 2"    />
<area shape="rect" coords="0,247,338,475" href="#" alt="lien 3" title="lien 3"    />
<area shape="rect" coords="336,245,635,475" href="#" alt="lien 4" title="lien 4"    />
<area shape="rect" coords="638,478,640,480" href="http://www.image-maps.com/index.php?aff=mapped_users_6201305161140066" alt="Image Map" title="Image Map" />
</map>
</div>
<p>	<a style="text-decoration:none; color:black; font-size:12px; font-family:verdana;" href="#" title="Lien 1">Lien 1</a>
 | 	<a style="text-decoration:none; color:black; font-size:12px; font-family:verdana;" href="#" title="lien 2">lien 2</a>
 | 	<a style="text-decoration:none; color:black; font-size:12px; font-family:verdana;" href="#" title="lien 3">lien 3</a>
 | 	<a style="text-decoration:none; color:black; font-size:12px; font-family:verdana;" href="#" title="lien 4">lien 4</a>
 | 	<a style="text-decoration:none; color:black; font-size:12px; font-family:verdana;" href="http://www.image-maps.com/index.php?aff=mapped_users_6201305161140066" title="Image Map">Image Map</a>
</p>

dabblet.js

// alert('Hello world!');

settings.json

{"view":"split-vertical","fontsize":"100","seethrough":"","prefixfree":"1","page":"css"}