CSS: mappa immagine

Una mappa immagine realizzata con i CSS ha l'indubbio vantaggio di rendere accessibile il suo contenuto anche alle tecnologie assistive. Sostanzialmente si tratta di posizionare in modo contestuale degli elementi su un contenitore avente come immagine di sfondo la cartina che vogliamo utilizzare come mappa. Gli elementi avranno a loro volta come immagine di sfondo un marcatore e conterranno del testo inizialmente nascosto che verrà poi rivelato quando l'utente passerà il mouse sul punto designato. Vediamo i dettagli dell'implementazione.

Cominciamo dalla marcatura:

<div id="map">

	<ul>
	
		<li id="vasto">
			<a href="http://www.vasto.org/">
			
			  <span>Vasto, citt&agrave; adottiva di Gabriele Romanato</span>
			
			</a>
		</li>
		<li id="torino">
			<a href="http://www.brunildo.org/test/">
			
				<span>Torino, citt&agrave; di Bruno Fassino</span>
			
			</a>
		</li>
		<li id="formigine">
			<a href="http://www.wamboo.it/">
			
			  <span>Formigine, citt&agrave; di Wamboo</span>
			
			</a>
		</li>
	
	</ul>

</div>

Useremo gli elementi span come tooltip. Iniziamo dal contenitore generale, dimensionandolo e assegnandogli una cartina come immagine di sfondo:

#map {
	width: 700px;
	height: 700px;
	margin: 0 auto;
	background: url(italy.gif) no-repeat;
}

Passiamo ora alla lista. Resettiamo i suoi stili, gli assegniamo piene dimensioni e la posizioniamo in modo relativo per creare il posizionamento contestuale per le sue voci:

#map ul {
	width: 100%;
	height: 100%;
	position: relative;
	margin: 0;
	padding: 0;
	list-style: none;
}

Ora posizioniamo le voci della lista in modo assoluto e assegnamo loro un'immagine di sfondo che fungerà da marcatore:

#map li {
	width: 20px;
	height: 20px;
	position: absolute;
	background: url(marker.png) no-repeat;
}

Quindi assegniamo delle dimensioni ai link in modo che i marcatori risultino cliccabili:

#map a {
	display: block;
	width: 100%;
	height: 100%;
	text-decoration: none;
}

Abbiamo eliminato la sottolineatura dai link per evitare che i nostri tooltip la ereditino. A questo punto diamo degli stili ai tooltip e li nascondiamo con il posizionamento assoluto negativo:

#map a span {
	width: 10em;
	padding: 0.4em;
	background: #d34545;
	color: #fff;
	border-radius: 6px;
	position: absolute;
	top: -1000em;
}

Quindi creiamo l'effetto su :hover riposizionando i tooltip vicino al loro marcatore:

#map a:hover span {
	top: 0;
	left: 25px;
}

I marcatori sono larghi 20 pixel, quindi con un offset sinistro di 25 pixel il tooltip si posizionerà a 5 pixel dal marcatore sulla destra. A questo punto posizioniamo i marcatori sulla mappa:

#vasto {
	top: 295px;
	right: 330px;
}

#torino {
	top: 90px;
	left: 60px;
}

#formigine {
	top: 120px;
	left: 165px;
}

Le coordinate sono calcolate per approssimazione visuale. Potete visionare l'esempio finale in questa pagina.