Basato sulla creazione di un immagine mappata in css, possiamo creare un effetto zoom su un dettaglio di un immagine di sfondo.
Immagine di preview:


Iniziamo per creare le immagini, una di sfondo e una per ogni dettagli
- sfondo.jpg: l’immagine di sfondo
- dettaglio1.jpg: l’immagine del primo dettaglio
- dettaglio2.jpg: l’immagine del secondo dettaglio
- dettaglio3.jpg: l’immagine del terzo dettaglio
La struttura html:
La struttura html consista in un semplice div con un identificatore unico con al suo interno 3 elementi <a> (i link) con ogni uno due nomi di classe. Il primo (dettagli)per evitare di ripetere le stesse regole css comune tra di loro, il secondo (dettaglio1, 2…)per applicare lo stile css relativo a questo link.
Questi link contengono a loro torno l’immagine del dettaglio (elemento <img />)
<div id="css_zoom">
<a class="dettagli dettaglio1" href="#nogo"><img src="dettaglio1.jpg" alt="" /></a>
<a class="dettagli dettaglio2" href="#nogo"><img src="dettaglio2.jpg" alt="" /></a>
<a class="dettagli dettaglio3" href="#nogo"><img src="dettaglio3.jpg" alt="" /></a>
</div>
Il CSS per creare l’effetto zoomato:
Per dare lo stile generale al div contenitore con id="css_zoom" specifichiamo:
- una posizione relativa che ci permetterà di seguito a posizionare in modo assoluto i link in rapporto al questo elemento contenitore
- la larghezza (width) e altezza (height) uguale alle misure dell’immagine di sfondo
- la nostra immagine di sfondo posizionato centralmente con la proprietà css background
- come extra puramente decorativo, un spazio cuscinetto (padding) di 10px attorno l’immagine di sfondo e un bordo attorno l’elemento.
#css_zoom{
position:relative;
width:400px;
height:300px;
background:#000000 url(sfondo.jpg) no-repeat center;
padding:10px;
border:2px solid #CCCCCC;
}
Per lo stile generale ai nostri link usiamo il nome della class ‘dettagli’.
- Convertiamo i link da elemento inline a elemento di blocco (display:block;) per potere specificare una larghezza (width) e altezza (height).
- Specifichiamo una posizione assoluta per potere di seguito posizionare al pixel preciso ogni single link
- come extra puramente decorativo, aggiungiamo un bordo attorno l’elemento e rimuoviamo i bordi griggi per Firefox con outline:none;
#css_zoom a.dettagli{
display:block;
width:80px;
height:80px;
position:absolute;
border:1px solid #FFFFFF;
outline:none;
}
Usando il secondo nome di classe di ogni link e grazie alla posizione assoluta, posizioniamo ogni link in rapporto al div contenitore.
#css_zoom a.dettaglio1{
top:86px;
left:48px;
}
#css_zoom a.dettaglio2{
top:50px;
left:263px;
}
#css_zoom a.dettaglio3{
top:200px;
left:251px;
}
Nascondiamo gli immagine del dettaglio in apertura con la proprietà css display.
#css_zoom a.dettagli img{
display:none;
}
Finalmente possiamo passare allo stile dei link sullo stato hover.
- cambiamo le misure dei link da 80×80 a 180×180 (la misura dell’immagine del dettaglio)
#css_zoom a:hover.dettagli{
width:180px;
height:180px;
}
- rendiamo l’immagine visibile quando si passa sopra i link con il mouse cambiando il valore della proprietà display da none (nessuno) a block (elemento di blocco)
#css_zoom a:hover.dettagli img{
display:block;
}
- riposizioniamo i link cambiando i valori top e left in modo che rimangono centrati con la loro posizione iniziale riusando il secondo nome di classe.
Per questo esempio, il spostamento è di 50px verso la sinistra e 50px verso l’alto, equivalente ai valori left e top iniziali meno 50px, 50 essendo il risultato della misura dell’immagine del dettaglio (180) meno la misura iniziale del link (80) diviso per 2 per il centramento.
#css_zoom a:hover.dettaglio1{
top:36px;
left:-2px;
}
#css_zoom a:hover.dettaglio2{
top:0;
left:213px;
}
#css_zoom a:hover.dettaglio3{
top:150px;
left:201px;
}
Su una nota generale…
- Togliamo i bordi alle immagini linkate aggiunti automaticamente dai browser
#css_zoom img{
border:none;
}
Il risultato finale:
Provato su IE6, IE7, FF2, FF3, Safari3, Opera9, Google Chrome su Windows.
Tutorial riscritto il 27 Aprile 2009, dovuto a un problema d’incompatibilità con Internet Explorer




















{ 12 comments… read them below or add one }
bel tutorial…
Grande Gaelle !
Ottimo tutorial !
Grazie Salmen, grazie Flep!!!
fantastic tutorial.
Thanks.
Muito obrigada!
grazie grazie mi serviva
Ciao Gaelle, seguendo il tuo tutorial ho creato lo zoom delle immagini, ma su IE non riesco a fare il link. Al passaggio del mouse, l’immagine si ingrandisce, ma non linka. Why?
Grazie
Giò
Hahahaha, che bella fregatura che è Internet Explorer!!!
Sinceramente non avevo provato a inserire un vero link quando ho creato questo tutorial. Ero partita solo con l’idea d’un semplice effetto zoom.
Comunque…per sistemare l’ errore d’interpretazione di IE, c’è da modificare un po le cose. Dammi il tempo di correggere il tutorial e avrai la soluzione. Grazie mille della segnalazione, quel problema mi era proprio scappato!
Ok, sistemato il tutto. Alla fine mi sembra più facile adesso e non dovrebbe più creare problemi.
Giusto per non farmi impazzire puoi spiegare cosa hai modificato, così lo adatto al mio script?
Grazie
Leggendo meglio ho visto che avevi cambiato molto
ora effettivamente è più semplice.
grazie
Grandioso, grazie!
Ti seguo da un pò.
Scrivi sempre ottimi articoli.