/

dabblet.css

/*  */
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:2;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, #f06, yellow);
background-size:100% 100%;
height: 100%;
width:100%;
text-align:center;
display:table;
}
body {display:table-cell;vertical-align:middle;}
map {position:relative;display:block;}
map {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 {background:rgba(0,0,0,0);box-shadow:0 0 2px white, 0 0 0 2000px rgba(0,0,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;}

dabblet.html

<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" /><a href="#" tabindex="0">Tajines</a>
  </div>

dabblet.js

// alert('Hello world!');

settings.json

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