Effetto CSS Popup che mostra le immagini al passaggio del cursore.

Come inserire l'Effetto CSS Popup nel modello di Blogger o in un singolo articolo o in una pagina statica. Con tale effetto si viene a mostrare una foto a grandezza naturale al passaggio del mouse.

L'Effetto CSS Popup Image Viewer è presente nella vasta libreria di Dynamic Drive da diverso tempo ma non avevo avuto ancora modo di presentarlo. Si tratta di utilizzare solamente i CSS, non ha bisogno di javascript o CSS3 quindi rende molto bene anche con IE sebbene in taluni modelli con tale browser ci siano i soliti problemi con la trasparenza rispetto ad altri oggetti presenti nel layout.

La funzione di questo effetto è quella di mostrare a grandezza naturale delle immagini quando il mouse passa sopra a delle miniature o a dei link. Può essere installato nel modello e quindi utilizzato in tutti gli articoli, oppure usato solo in un singolo post o in una data pagina statica per esempio per creare delle suggestive gallerie fotografiche.

Passate con il cursore sopra alla miniature e ai link seguenti per rendervi conto del tipo di effetto





Albero.

Erbivori.
Bruco che mangia foglia
Bruco.
Cavalli selvaggi
Stalloni.

Se si vuole inserire l'effetto nel Template bisogna andare su Modello > Modifica HTML > Procedi e cercare la riga </head>. Subito sopra va incollato questo codice

<style type='text/css'>
.thumbnail{
position: relative;
z-index: 0;
}
.thumbnail:hover{
background-color: transparent;
z-index: 9999;
}
.thumbnail span{ /* CSS per le immagini allargate */
position: absolute;
background-color: lightyellow; /* Colore dello sfondo */
padding: 5px;
left: -1000px;
border: 1px dashed gray; /* Colore del bordo */
visibility: hidden;
color: black;
text-decoration: none;
}
.thumbnail span img{ /*CSS per le immagini allargate */
border-width: 0;
padding: 2px;
}
.thumbnail:hover span{ /*CSS per le immagini allargate al passaggio del mouse*/
visibility: visible;
top: 0;
left: 60px; /*posizione orizzontale per inizio immagine allargata */
}
</style>

Le personalizzazioni più importanti sono state colorate e sono stati aggiunti dei commenti esplicativi in verde. Si possono variare i codici dei colori o lo stile dei bordi. Quando si vogliono inserire delle miniature o dei link con l'Effetto CSS Popup occorre postare in modalità HTML un codice come questo

<a class="thumbnail" href="#thumb"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhhJjhuztEAKtSlPhViX8qGPt36_mF8BnZjTWs7OGzJtlVc9E02Xgt-eKNv7mEPyI8dEhPjFItAAahInHnZtVhUwLkQKRvAcCyOMEMGSF2ZlORKM8A8TjDdl8mSyaNZvgONNkvdTEUqn0Hk/s300/albero.jpg" width="100px" height="66px" border="0" /><span><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhhJjhuztEAKtSlPhViX8qGPt36_mF8BnZjTWs7OGzJtlVc9E02Xgt-eKNv7mEPyI8dEhPjFItAAahInHnZtVhUwLkQKRvAcCyOMEMGSF2ZlORKM8A8TjDdl8mSyaNZvgONNkvdTEUqn0Hk/s300/albero.jpg" /><br />Albero con nuvola.</span></a>
<a class="thumbnail" href="#thumb"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj2LXfq00t0np-ug3clc6rbdSN-avW89JQEpxdnpxDdxIopbRcsjH4o3OqJYB8cHnTrL6eH4obXyE9PkrZJhLRZWc-wxFy79EsNpZvYtjlas3U4ZoVHVwLkbeaqgTMiXC4GhID2Zu3tGW_V/s300/alci.jpg" width="100px" height="66px" border="0" /><span><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj2LXfq00t0np-ug3clc6rbdSN-avW89JQEpxdnpxDdxIopbRcsjH4o3OqJYB8cHnTrL6eH4obXyE9PkrZJhLRZWc-wxFy79EsNpZvYtjlas3U4ZoVHVwLkbeaqgTMiXC4GhID2Zu3tGW_V/s300/alci.jpg" /><br />Erbivori della savana.</span></a>

se si vogliono mostrare delle miniature, oppure come questo

<a class="thumbnail" href="#thumb" >Bruco che mangia foglia<span><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhDNJU88zYoDYM4obXsVCKH2mz2-p8d8KcaDzKbUVAJCyULOyXsVTTuvbg0tdR1P1Qk5dpwOUQye-dYENe-Uv9ia2QkwyC6-CITIrhaRpsDJBJUI0_W4YCULjl0oBIKhpY5aNxCmLvulxMD/s300/bruco.jpg" /><br />Bruco che diventa farfalla</span></a><br />
<a class="thumbnail" href="#thumb" >Cavalli selvaggi<span><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjf9H4bJDnQ7CtQDx0-tKLaFP4Zi18r-A8Pl_nDiLvMmqhKmAiidkbG4eGuTs3LKyT9KDujEtrvk9xP_3K9iJp1Sbm-XnJkebCabhKoWK4opDQ1pTpuRQiMoIvq_3StiyNHfoB0nW66XO-H/s300/cavalli.jpg" /><br />Lotta tra stalloni</span></a>

per inserire l'effetto CSS Popup in dei collegamenti. Per le miniature occorre inserire due volte l'URL delle singole immagini mentre per i link è sufficiente una sola volta. Sia per le miniature, sia per i collegamenti è possibile aggiungere una descrizione che si visualizzerà sotto l'immagine al passaggio del cursore. Nel primo codice la riga left: 60px; indica a quale distanza orizzontale deve iniziare a visualizzarsi l'immagine allargata.

Se si vuole mostrare l'Effetto in una sola pagina o in solo post non occorre modificare il template. Basta aprire l'Editor di Blogger e, prima di confezionare il post, incollare in modalità HTML il codice che invece era stato inserito nel modello

Le immagini o i link dovranno poi essere postati con la modalità illustrata in precedenza. Se si volesse realizzare una Galleria Fotografica si può seguire questo procedimento

1. Incollare il codice del CSS in modalità HTML nella pagina della galleria
   
2. Creare la galleria di miniature usando una tabella e Windows Live Writer
   
3. Inserire la classe di stile class="thumbnail" href="#thumb" di CSS Popup

Ricordo che prima del cancelletto nel link può anche essere inserito l'URL di una qualsiasi pagina con questa sintassi di esempio

<a class="thumbnail" href="http//www.ideepercomputeredinternet.com/#thumb"><img src="URL_IMMAGINE" width="100px" height="66px" border="0" /><span><img src="URL_IMMAGINE" /><br />Descrizione immagine</span></a>

In questo caso cliccando sopra alla miniatura si andrà naturalmente alla pagina collegata.