Resize image <map> : apply and change background <area> for webkit

dabblet.css

/* Resize image <map> : apply and change background <area> for webkit */
div {display:inline-block;position:relative;border-radius:1em;border:inset #333;
box-shadow:0 0 5px #fff;height:800px;width:1300px;overflow:hidden;}
div p {height:25%;width:25%;position:absolute;z-index:3;top:0;left:0;padding:10px;margin:0;background:purple;color:white;font-size:1.5em;box-shadow:0 0 500px 30px gold, 0 0 800px 100px white;border-radius:0 0 1em 0 ;border-right:outset #333;border-bottom:outset #333}
img {display:block;margin:0 auto;}
div > img {position:absolute;top:0}

html {
background: #f06;
background: linear-gradient(45deg, #159, turquoise);
background-size:100% 100%;
height: 100%;
width:100%;
text-align:center;
display:table;
}
body > div{
transform-origin:center 0 ;}
#s025:checked  ~ div {transform:scale(0.25);margin:0 -600px -600px;transition:1s}
#s050:checked  ~ div {transform:scale(0.5);margin:0 -400px  -400px;transition:1s}
#s075:checked  ~ div {transform:scale(0.75);margin:0 -200px -200px;transition:1s}
#s100:checked  ~ div {transform:scale(1);margin:0 auto;transition:1s}
#s125:checked  ~ div {transform:scale(1.25);margin: 0 auto 200px;transition:1s}
body {display:table-cell;vertical-align:middle;}
map {position:relative;display:block;height:100%;width:100%;top:0;left:0;line-height:800px;}
area {display:inline-block;width:5em;position:relative;z-index:1;line-height:1em;
background:rgba(0,0,0,0.25);color:white;line-height:40px;border-radius:3em/2em;}
area:after {content:attr(title);}
area[title]:hover {z-index:2;background:rgba(0,0,0,0);box-shadow:0 0 10px 1px white, 0 0 0 2000px rgba(100,50,0,0.5);}
area[title="lien1"] {position:absolute;left:979px;top:102px;width:116px;height:41px;}
area[title="lien2"] {position:absolute;left:521px;top:430px;width:127px;height:54px;line-height:54px;}
area[title="lien3"] {position:absolute;left:73px;top:489px;width:107px;height:36px;line-height:36px;}
area[title="lien4"] {position:absolute;left:2px;top:453px;width:57px;height:81px;line-height:81px;}
area[title="lien5"] {position:absolute;left:314px;top:707px;width:73px;height:35px;line-height:35px;}
area[title="lien6"] {position:absolute;left:430px;top:733px;width:80px;height:51px;line-height:51px;}
area[title="lien7"] {position:absolute;left:694px;top:459px;width:89px;height:55px;line-height:55px;}
area[title="lien8"] {position:absolute;left:973px;top:341px;width:77px;height:36px;line-height:36px;}
area[title="lien9"] {position:absolute;left:1010px;top:258px;width:127px;height:33px;line-height:33px;}
area[title="lien10"] {position:absolute;left:1083px;top:155px;width:131px;height:37px;line-height:37px;}
span {position:relative;z-index:10;top:-1.4em;float:right;}
span , a {text-shadow: 0 0 5px white, 0 0 10px white, 0 0 15px gold ;font-weight:bold;font-size:2em;padding:0 0.5em;color:#333}

dabblet.html

<h1>Resize me !</h1>
	<input id="s025" type="radio"  name="resize"/>         <label for="s025" > 25%</label> |	
	<input id="s050" type="radio"  name="resize"/>         <label for="s050" > 50%</label> |	
	<input id="s075" type="radio"  name="resize" checked /><label for="s075" > 75%</label> |	
	<input id="s100" type="radio"  name="resize"/>         <label for="s100" >100%</label> |	
	<input id="s125" type="radio"  name="resize"/>         <label for="s125" >125%</label> 
	<hr/>
<div>
<p>pain<img  alt="itinéraire"  src="http://lorempixel.com/130/80/food/3"   />fromage & <br/>Biere</p>
 <map name="search">   
      <area shape="rect" coords="979,102,1093,143" title="lien1" href="01/index.html" tabindex="0">
      <area shape="rect" coords="521,430,648,484" title="lien2" href="02/index.html" tabindex="0">
      <area shape="rect" coords="73,489,180,525" title="lien3" href="03/index.html" tabindex="0">
      <area shape="rect" coords="2,453,59,534" title="lien4" href="04/index.html" tabindex="0">
      <area shape="rect" coords="314,707,387,743" title="lien5" href="05/index.html" tabindex="0">
      <area shape="rect" coords="430,733,510,784" title="lien6" href="06/index.html" tabindex="0">
      <area shape="rect" coords="694,459,783,514" title="lien7" href="07/index.html" tabindex="0">
      <area shape="rect" coords="973,341,1050,379" title="lien8" href="08/index.html" tabindex="0">
      <area shape="rect" coords="1010,258,1137,291" title="lien9" href="09/index.html" tabindex="0">
      <area shape="rect" coords="1083,155,1214,192" title="lien10" href="10/index.html" tabindex="0">
  </map>
  <img  alt="itinéraire"  src="http://lorempixel.com/1300/800/food/3"  usemap="#search" />
 <span>MAP & AREA with style in Chrome/Safari & Opera</span>
  </div>
  <p><a href="http://dabblet.com/gist/5592972" target="_blank">& responsive ?</a></p>

dabblet.js

// alert('Hello world!');

settings.json

{"view":"split","fontsize":"100","seethrough":"","prefixfree":"1","page":"result"}