Effetto zoom per le immagini con passaggio e clic del cursore.

Come mostrare una immagine che si ingrandisce al passaggio del cursore o al click del mouse con dimensioni personalizzabili.

Con il mouse si possono creare tutta una serie di interazioni che sono chiamate eventi e che sono molto utilizzati nei linguaggi javascript e CSS. In quest'ultimo linguaggio è molto usato il codice per variare l'aspetto di un oggetto HTML quando ci si passa sopra con il cursore. Due eventi distinti si creano quando il mouse passa sopra a un elemento e quando il cursore lascia l'elemento in oggetto.

Ci sono poi gli eventi determinati dai click singoli, quelli determinati dai doppi click senza considerare anche il tasto del mouse che viene premuto che può essere quello sinistro, quello destro o quello centrale.

Con dei codici semplicissimi di javascript si possono creare degli effetti per rendere trasparenti o opache le immagini al passaggio del cursore oppure applicare un effetto zoom quando ci si clicca sopra.

In questo post vedremo dei semplici effetti di zoom applicati  delle immagini mentre nel prossimo articolo vedremo come creare un effetto trasparenza al passaggio del mouse mentre se ci riesco mostrerò come il passaggio del cursore sopra una foto di grigi possa mostrarne i colori o viceversa convertirla in scala di grigi.

COME CARICARE UNA IMMAGINE SU GOOGLE FOTO

Come prima operazione dobbiamo caricare una immagine su Google Foto e ottenerne il link diretto. Se siamo utenti di Blogger si può creare una bozza di un post su cui caricare la foto in questione o anche più di una. Si va poi su HTML e si copia l'indirizzo della immagine che si trova dopo src=".

Quando le immagini sono caricate su Google Foto attraverso Blogger rimangono online anche se la bozza viene eliminata. Gli indirizzi delle immagini così ottenuti possono essere utilizzati per creare degli effetti.

IMMAGINE CHE SI INGRANDISCE AL PASSAGGIO DEL MOUSE

Per avere l'effetto di una immagine che si ingrandisce al passaggio del mouse dovremo impostare le dimensioni della immagine in modo che venga mantenuto il rapporto tra larghezza e altezza. Per esempio con questo codice

<div align="center"> <img width="150" height="110" style="cursor:zoom-in;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg96uH-S_gRhBlN3Fwk8WaObqbPP4iAwv6R-wbFJPp_qpBltySjlsmEHUWYxMyLXeNiWtXX9azmOV23eWkRARQMJbOug2eKmEDRySP8WuvL887oCmfmpONq2Ea7gHKJRY6O7QCgeOZM8Dat/s1600/bicchieri.jpg" onmouseover="this.width=450;this.height=330;" onmouseout="this.width=150;this.height=110;" title="bicchieri" alt="bicchieri" /></div>

l'immagine verrà mostrata al centro con dimensioni iniziali di 150x110 pixel. Quando ci si passa sopra con il mouse l'immagine diventerà di dimensioni 450x330 pixel cioè aumenterà di tre volte in altezza e larghezza (evento onmouseover), mentre quando il mouse lascerà la foto (evento onmouseout) tornerà di nuovo 150x110 pixel. Ovviamente l'URL della foto è personalizzabile così come le dimensioni scelte.

Il risultato sarà il seguente:

Per non interferire con gli altri contenuti il codice va incollato alla fine di un paragrafo e prima di un altro.

IMMAGINE CHE SI INGRANDISCE CON IL CLICK DEL CURSORE

Al posto dell'evento del passaggio del cursore sopra alla foto si può usare quello del click per innescare l'effetto zoom quando si clicca sopra alla foto. Il codice in questo caso diventa il seguente

<div align="center">
<img width="150" height="110" style="cursor:zoom-in;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg96uH-S_gRhBlN3Fwk8WaObqbPP4iAwv6R-wbFJPp_qpBltySjlsmEHUWYxMyLXeNiWtXX9azmOV23eWkRARQMJbOug2eKmEDRySP8WuvL887oCmfmpONq2Ea7gHKJRY6O7QCgeOZM8Dat/s1600/bicchieri.jpg" onclick="this.width=450;this.height=330;" ondblclick="this.width=150;this.height=110;" title="Click per ingrandire e doppio click eliminare lo zoom" alt="bicchieri" /></div>

Gli eventi del click (onclick) e del doppio click (ondbclick) innescano rispettivamente l'effetto zoom-in e zoom-out. Il risultato sarà il seguente:

Concludo ricordando che il tag Alt è importante per questioni SEO (testo alternativo) e che il tag Title serve per visualizzare un tooltip quando si passa sopra alla immagine che mostrerà il testo inserito nel suo campo.