Gradient Magnifier sulle immagini con i CSS

Ogni riproduzione è vietata, se non attraverso espressa richiesta all'autore.

Usando gli stessi principii simili alle animazioni ed ai menu "flyout/drop-down", ho prodotto questa dimostrazione d'ingrandimento di immagine attraverso un gradiente.

Il tutto si basa solo su una immagine nella quale sono annidate altre undici "in profondità" tra le voci elenco, per dare il senso di elasticità all'immagine stessa.

Tale applicazione non funziona con i browsers Internet Explorer in quanto essi non supportano la pseudoclasse hover per gli elementi della lista affinchè si possa avere l'effetto ingrandimento dell'immagine.

Con Internet Explorer, invece, si deve usare un hack affinchè l'applicazione dia lo stesso risultato; tutto ciò è stato ottenuto con l'uso delle tabelle ed i collegamenti annidati.

È sufficiente muovere il mouse verso destra o verso sinistra, al di sopra del diagramma posto sull'immagine per vedere l'ingrandimento graduale della stessa.

Funziona in Internet Explorer 5.5, Internet Explorer 6 e, se tutto va bene, con il rilascio della versione finale di Internet Explorer 7, in Firefox, in Opera e Safari.

Chiunque, con l'utilizzo di altri browser, potesse confermarlo se questo funziona, gliene sarei grato.

Il testo è stato aggiunto per mostrare come la piccola immagine originale, che è disposta in posizione relativa si comporta come una normale immagine flottante a sinistra ma anche come una immagine posizionata quando viene ingrandita.

Il CSS è scritto nel codice sorgente della pagina e richiede uno stile separato per Internet Explorer.

L'XHTML è scritto nel box #info nel corpo del codice sorgente.

Dopo questa spiegazione, da parte dell'autore, entriamo nel "cuore" dello script e vediamo come è stato possibile ottenere l'applicazione in oggetto.

Innanzitutto è stato utilizzato un box contenitore, nominato #info; le sue caratteristiche, attraverso i CSS, sono:

#info {position:relative;}

Altre volte ho avuto modo di scrivere nei miei tutorial che un box, posizionato in maniera relativa, può contenerne altri al suo interno posizionati in maniera assoluta. È quello che vedremo tra poco. Procediamo con il codice:

#magnifier{ 
display:inline;
position:relative;
width:240px;
height:205px; 
background: url(gradient.gif) top left no-repeat;
margin:0 20px 10px 0; 
z-index:100;
float:left;
} 

Questo box, situato all'interno di #info, contiene l'immagine del gradiente e, al di sotto di essa, posizioneremo anche l'immagine che si espanderà e rimpicciolirà quando passeremo sul primo. Le dimensioni (240 pixel di larghezza e 205 pixel in altezza), sono quelle che vedremo all'apertura della pagina.

#magnifier img{
position:absolute; 
width:240px; 
height:180px;
top:25px;
left: -240px;
}  

Questo codice serve per posizionare, nella pagina html, l'immagine che si espanderà e contrarrà. Come si può vedere, abbiamo utilizzato la dichiarazione position:absolute;. La foto rimane nella posizione desiderata in quanto sia il box #info che il box #magnifier, sono stati dichiarati con posizione relativa; se non avessimo usato tale dichiarazione si sarebbe disposta, in base alle coordinate fornite, non rispetto all'attuale contenitore, ma alla finestra del browser.

Associare un elenco al box #magnifier

Come spiegato da Stu Nicholls nell'introduzione, ogni volta che si passerà sulla "scala graduata" per far espandere l'immagine, metteremo il mouse su una voce di un elenco. Questo per quanto riguarda i browser diversi da Internet Explorer. Per quest'ultimo, si provvederà in altro modo.

#magnifier ul{
padding:0; 
border:0;
margin:0;
list-style-type:none;
} 

#magnifier li{ 
display:block;
width:24px; 
height:20px;
position:absolute; 
left:24px;
top:0;
background:transparent;
}  

Annulliamo margini, padding, voci elenco e bordi con il primo gruppo di codice. Per ogni singola voce di "#magnifier li" abbiamo un posizionamento assoluto, altezza e larghezza ottenute dalla suddivisione di ogni porzione "attiva" quando passeremo con il mouse. A questo punto sarebbe opportuno che venga mostrata l'immagine del gradiente:

Immagine della scala graduata

Ogni "scalino" sarà una voce elenco di altezza pari a 20 pixel e larghezza 24 pixel.

#magnifier a{
display:block; 
width:24px;
height:20px;
} 

Questa porzione di codice stabilisce che ogni area "attiva" (vale a dire ogni singola voce linkata), viene dichiarata elemento di blocco e, come si può notare, delle stesse dimensioni assegnate a #magnifier li.

#magnifier li.one {left:0;}

La classe, dal nome "one", viene assegnata al primo "scalino" del gradiente, il più basso per intenderci. Siccome è stato dichiarato precedentemente (si veda il blocco di codice relativo a #magnifier li) che la distanza da sinistra deve essere di 24 pixel (left:24px;), se non si assegnasse questa classe, quando ci si troverebbe sul primo link, non apparirebbe la classica mano indicante un collegamento. Quindi la classe "one" sistema il tutto e l'area attiva comincerebbe dal primo pixel sulla sinistra del gradiente.

#magnifier li:hover{
width:24px; 
height:20px;
} 

Anche nello stato :hover, non dovendo assegnare nessun cambiamento di colore al passaggio del mouse come si farebbe con il testo, viene dichiarata solo l'ampiezza del link: 24 pixel X 20pixel.

Il codice CSS che verrà dichiarato ora, conferisce le caratteristiche di elasticità che sono il princio cardine di tutta l'applicazione. Siamo giunti al momento di dichiarare le undici classi da associare ad ogni elemento della lista. L'immagine originale, utilizzata da Stu Nicholls, ha dimensioni pari a 640 X 480 pixel.

#magnifier li.one:hover img {width:280px; height:210px;}
#magnifier li.two:hover img {width:320px; height:240px;} 
#magnifier li.three:hover img {width:360px; height:270px;}
............ 
#magnifier li.eleven:hover img {width:240px; height:180px;}

Per semplicità sono stati introdotti dei nomi da associare alle classi facilmente intuibili, come si può vedere dal codice. Analizzando il codice appena scritto avremo, all'apertura della pagina, l'immagine delle dimensioni "normali"; tali dimensioni vengono conferite attraverso la classe:

#magnifier li.eleven:hover img{
width:240px; 
height:180px;
} 

Possiamo dire che tale classe non entra in azione ma serve per tenere "ferme" le dimensioni dell'immagine a 240 X 180 pixel. Il gradiente comincia ad entrare in funzione già dal primo "scalino". L'immagine, infatti, comincia a crescere di 40 pixel in larghezza e di 30 pixel in altezza. Assegnando, proporzionalmente, questo incremento alle altre classi, la decima sarà:

#magnifier li.ten:hover img{
width:640px; 
height:480px;
}

Tali misure sono proprio quelle della fotografia originale.

Avremmo terminato qui se i browser in circolazione interpretassero alla stessa maniera il codice CSS. Come anticipato da Stu, nell'introduzione, con Internet Explorer ci si deve comportare diversamente. E quando mai non è così!! Per il momento vediamo la pagina di esempio con il gradiente in azione. Se state utilizzando Internet Explorer siete rimasti delusi. Se state utilizzando Firefox non c'è nessun problema. Il tutto funziona correttamente.

Il codice per Internet Explorer

Perchè Internet Explorer interpreti alla stessa maniera di Firefox, ed altri, codice html e codice CSS, dobbiamo comportarci in altro modo. Il gradiente deve essere inscritto in una tabella; ecco il codice:

#magnifier table{
border:0;
padding:0;
margin:0;
border-collapse:collapse; 
} 

Oltre questo si devono usare i commenti condizionali nella pagina html, affinchè Internet Explorer 6 e precedeenti si comportino alla stessa maniera dei loro concorrenti.

<!--[if lte IE 6]>
#magnifier a.aone:hover img {width:280px; height:210px;}
#magnifier a.atwo:hover img {width:320px; height:240px;}
#magnifier a.athree:hover img {width:360px; height:270px;
} 
.................. 

Se la versione di Internet Explorer è minore o uguale al numero indicato (lte significa: less-than or equal), allora deve applicare il codice appena scritto. Anche in questo caso si tratta di altre undici classi che impostano le medesime dimensioni all'immagine, uguali a quelle precedentemente indicate.

Il codice html

Vediamo adesso una parte di codice html da scrivere nella pagina; è davvero singolare che per colpa di Internet Explorer si debba inserire molto più codice rispetto a quanto effettivamente ne serve.

<div id="magnifier">
<ul> 
<li class="one"><a class="aone" href="#nogo"><!--[if  IE 7]><!--></a><!--<![endif]--> <table><tr><td> 
<ul>
<li class="two"><a class="atwo" href="#nogo"><!--[if  IE 7]><!--></a><!--<![endif]--> <table><tr><td> 
<ul>
<li class="three"><a class="athree" href="#nogo"><!--[if  IE 7]><!--></a><!--<![endif]--> <table><tr><td> 
<ul>
............. 

All'interno del box #magnifier viene scritta ogni singola voce di elenco seguita da un altro commento condizionale, questa volta per Internet Explorer 7 ed ignorato dagli altri browser. Dopo viene aperto il tag <table>, seguito da <tr> e <td>. Questo deve essere scritto per le undici classi di cui sopra. Al termine di queste viene posta l'immagine. Immediatamente dopo si cominciano a chiudere, a ritroso, le tabelle e le voci elenco. Un bel lavoraccio no?

Dopo aver visto la pagina finale, correttamente interpretata anche da Internet Explorer, permettemi di complimentarmi con Stu Nicholls.

© www.extrowebsite.com - Grafica, layout, articoli e guide sono di esclusiva proprietà del webmaster - Tutti i diritti riservati