Scambio immagine con i CSS

È pur vero che potremmo ottenere lo stesso risultato con del codice JavaScript. Da sempre è stato utilizzato per ottenere questo e molto altro ancora. Siccome, e credo se ne saranno accorti coloro i quali entrano nel sito, da un pò di tempo sono un sostenitore dei CSS, è bene utilizzarli il più possibile, andando oltre la semplice formattazione del testo, ove fosse possibile, o creare delle classi da richiamare nelle pagine ecc... Questo codice, inizialmente nato per formattare in maniera diversa dai browser quello che viene rappresentato a video, sta diventando, a mio modesto parere, anch' esso un vero e proprio linguaggio di programmazione.

Fatto questo, spero non barboso, preambolo, passiamo ad analizzare quello che otterremo come risultato finale. Il nostro scopo è quello di poter scambiare una prima immagine, quando passiamo su di essa con il mouse, con una seconda. Tutto quello che ci serve, sono due semplici foto; quelle preparate per questo esempio hanno una dimensione di 152px X 120px. La dimensione ci tornerà utile quando andremo a dichiarare l' "area" sulla quale estendere il link.

Il codice CSS

Inseriremo le due immagini in un box che nomineremo #foto. Il suo codice è:

#foto{
 margin:20px auto;
 padding:0;
 text-align:center;
 background:url(foto.jpg) center center no-repeat #fff;
 height:128px;
 width:160px;
 } 

 img{
 margin:4px;
 padding:0;
 } 

Da notare la misura totale del box che conterrà l' immagine: 160px. Questo perchè sono stati calcolati anche gli 8 px di margine (4 per lato) che sono stati dichiarati per l' immagine stessa.
Quindi: 4px + 152px + 4px = 160px. Tra l' altro ho anche voluto che l' immagine rimanesse al centro del suo contenitore, per far vedere il colore di sfondo dello stesso.
Inoltre si dichiara lo sfondo da dare al box; una sorta di "precaricamento" dell' immagine, in modo tale che all' apertura della pagina la vedremo al suo posto. Passiamo, adesso, alla creazione delle classi alle quali saranno associati i vari stati per il link. Per prima cosa avremo la classe rollover, il cui codice è:

.rollover{ 
 width:152px;
 height:128px;
 }  

Tale classe ha le stesse ed identiche dimensioni delle nostre 2 immagini. Ecco il motivo per cui l' ho scritto all' inizio. Adesso dovremo associare la suddetta classe al tag img:

.rollover img { border:none;} 

Si vuole semplicemente che l' immagine non abbia nessun bordo; quello che appare di default su una immagine linkata, per intenderci. Ora dovremo dichiarare su quale parte dell' immagine vedremo apparire la classica manina. In altri termini nello stato a:link. Il codice è:

.rollover a { display:block; } 

Questa regola dichiara che la classe "rollover" nello stato a:link ( scrivere semplicemente a è la stessa cosa) associata ad un qualsiasi elemento, lo renderà come elemento block-level e non inline; cioè si estende per tutta l' area, quindi per tutta la dimensione dell' immagine.

.rollover a:hover img { 
 display:none;  }  

La dichiarazione qui sopra riportata fa in modo che la classe rollover nello stato a:hover sull' immagine, non venga visualizzata. Ometterla vuol dire che vedremo cambiare solo il colore di sfondo. In ultimo abbiamo la seguente dichiarazione:

.rollover a:hover{ 
 width:160px; 
 height:128px;
 background:url(foto2.jpg) center center no-repeat #09d;
 } 

La cosa da notare è lo sfondo assegnato: altro non è che la seconda immagine, quella che vorremo vedere quando passeremo con il puntatore del mouse.

Conclusioni

Eccoci giunti al termine del nostro rollover. La pagina di esempio dimostrerà che, almeno per piccole cose, possiamo lasciare da parte codice un pò più pesante e che, soprattutto, potremmo non inserire nel documento HTML.
Alla prossima.