eduinafbackupcode/eduinafoldcode/html/mappa_planetari.html

<style>.mappainaf {
  width:100%; position:relative; margin:20px 0 100px 0;
}

.mappainaf img {
  display:block; width:100%; border-radius:20px;
}

.mappainaf a {
  color: #1d71b8;
}

.mappainaf box {
  margin:0;
  padding:0;
  list-style:none;
}

#luogoinaf {
  font-family:arial, helvetica, sans-serif;
  font-size:8pt;
}

.mappainaf box luogoinaf {
  position:absolute;
  display:block;
  background:url(http://planetari.astro.it/wp-content/uploads/2018/07/blank.gif);
}

.mappainaf box span { display:none; }

.mappainaf box luogoinaf:hover span {
  position:relative;
  display:block;
  width:200px;
  left:-20px;
  top:-20px;
  padding:5px;
  border:1px solid #000;
  border-radius: .25em .25em .25em .25em;
  background:#fff;
  text-decoration:none;
  color:#000;
  filter:alpha(opacity=80);
  opacity:0.8;
}

.mappainaf luogoinaf.torino {
  left: 8.5%;
  top: 18%;
  width: 6.7%;
  height: 6.5%;
  padding-bottom: 2.18%;
}

.mappainaf luogoinaf.milano {
  left: 19.3%;
  top: 14.5%;
  width: 6.7%;
  height: 6.5%;
  padding-bottom: 2.18%;
}

.mappainaf luogoinaf.padova {
  left: 40.8%;
  top: 14.5%;
  width: 6.7%;
  height: 6.5%;
  padding-bottom: 2.18%;
}

.mappainaf luogoinaf.trieste {
  left: 54.3%;
  top: 12%;
  width: 6.7%;
  height: 6.5%;
  padding-bottom: 2.18%;
}

.mappainaf luogoinaf.bologna {
  left: 35.8%;
  top: 22.5%;
  width: 6.7%;
  height: 6.5%;
  padding-bottom: 2.18%;
}

.mappainaf luogoinaf.firenze {
  left: 35.8%;
  top: 30.5%;
  width: 6.7%;
  height: 6.5%;
  padding-bottom: 2.18%;
}

.mappainaf luogoinaf.roma {
  left: 46.1%;
  top: 48%;
  width: 6.7%;
  height: 6.5%;
  padding-bottom: 2.18%;
}

.mappainaf luogoinaf.teramo {
  left: 55.3%;
  top: 41%;
  width: 6.7%;
  height: 6.5%;
  padding-bottom: 2.18%;
}

.mappainaf luogoinaf.napoli {
  left: 58.8%;
  top: 58%;
  width: 6.7%;
  height: 6.5%;
  padding-bottom: 2.18%;
}

.mappainaf luogoinaf.catania {
  left: 66%;
  top: 86%;
  width: 6.7%;
  height: 6.5%;
  padding-bottom: 2.18%;
}

.mappainaf luogoinaf.reggioc {
  left: 72%;
  top: 82%;
  width: 6.7%;
  height: 6.5%;
  padding-bottom: 2.18%;
}

.mappainaf luogoinaf.palermo {
  left: 52.3%;
  top: 82%;
  width: 6.7%;
  height: 6.5%;
  padding-bottom: 2.18%;
}

.mappainaf luogoinaf.cagliari {
  left: 19%;
  top: 70.5%;
  width: 6.7%;
  height: 6.5%;
  padding-bottom: 2.18%;
}</style>

<div class="mappainaf" aria-haspopup="true"><img src="http://planetari.astro.it/wp-content/uploads/2018/07/mappa_italia01.png" alt="" width="800" height="917" class="aligncenter size-full wp-image-4137" />
<box><luogoinaf class="torino"><span><a href="../planetari/planetario-torino/">Torino</a></span></luogoinaf></box>
<box><luogoinaf class="bologna"><span><a href="../planetari/planetari-di-bologna/">Bologna</a></box>
<box><luogoinaf class="roma"><span><a href="../planetari/planetario-roma/">Roma</a></box>
<box><luogoinaf class="napoli"><span><a href="../planetari/planetario-napoli/">Napoli</a><br/>
- Città della Scienza</span></luogoinaf></box>
<box><luogoinaf class="reggioc"><span><a href="../planetari/planetario-reggio-calabria/">Reggio Calabria</a></box>
<box><luogoinaf class="palermo"><span><a href="../planetari/planetario-palermo/">Palermo</a></box>
<box><luogoinaf class="cagliari"><span><a href="../planetari/planetario-cagliari/">Cagliari</a></span></luogoinaf></box>
<box><luogoinaf class="firenze"><span>Firenze</span></luogoinaf></box>
<box><luogoinaf class="padova"><span>Padova</span></luogoinaf></box>
<box><luogoinaf class="trieste"><span>Trieste</span></luogoinaf></box>
</div>