Creare con facilità “spilli” con i CSS

Nei siti internet, come nella vita, le soluzioni migliori sono quelle più semplici ed essenziali. Oggi cercheremo di emulare attraverso questo tutorial, l’homepage di AfricaTour 2008, servendoci dei CSS.

1. Codice HTML

Per prima cosa buttiamo giù il codice html:

<div id="map">
<div id="america"></div>
<div id="europe"></div>
<div id="africa"></div>
<div id="asia"></div>
<div id="australia"></div>
<div id="southAmerica"></div>
</div>

2. Codice CSS

#map {
   width:669px;
   height:351px;
   background-image:url('map.jpg');
   position:relative;
}
#map div {
   width: 120px;
   height:60px;
   position:absolute;
   cursor:pointer;
   background-repeat:no-repeat;
}

Nella prima parte del codice css, abbiamo specificato che il contenitore dovrà avere una larghezza di 669px e un’altezza di 351px ed abbiamo impostato lo sfondo.

Nella seconda parte, abbiamo specificato che ogni spillo, dovrà avere 120px come larghezza e 60px come altezza, che la sua posizione sarà assoluta (e verrà specificata successivamente) e che al passaggio del mouse il cursore deve essere una manina, la stessa dei colelgamenti ipertestuali.

Adesso dovremo analizzare la cartina e vedere come posizionare i vari “spilli”:

#america {
   background-image:url('america_small.png');
   top:60px;
   left:30px;
   background-position:right bottom;
}
#america:hover {
   background-image:url('america_big.png');
}

Dalle istruzioni top:60px e left:30px abbiamo specificato in quale punto della cartina posizionare i vari “spilli”. Inoltre da #america:hover, abbiamo inserito quale sfondo mostrare una volta che il mouse si trova sopra il div.

Il tutorial è terminato! VI invito inoltre a visualizzarne una demo.

si ringrazia Janko Jovanovis per aver permesso pubblicazione del suo tutorial su ziosteve.com [jankoatwarpspeed]

Piaciuto l'articolo!? Iscriviti ai miei FeedRSS!