Effetto per ingrandire le immagini al passaggio del mouse o con un click

Effetto per ingrandire le immagini al passaggio del cursore o con un click del mouse che non utilizza librerie javascript.

Ho già illustrato l'effetto Expando che è abbastanza semplice da installare e fa in modo di aumentare la dimensione delle immagini al passaggio del mouse. Questo effetto presuppone l'introduzione di un javascript nel modello di Blogger. Se si pensa di avere poche occasioni per proporre nel blog una simile personalizzazione, si può optare per un metodo di inserimento delle immagini meno invasivo che agirà solo su una determinata foto e solo nel post in cui è stata inserita.

Le immagini che si vogliono postare devono essere preventivamente caricate su servizi tipo Picasa, SkyDrive o DropBox. L'effetto funzionerà con tutti i browser ma con IE sarà più lento che con Chrome e Firefox.

Immagine che si ingrandisce al passaggio del mouse

Ecco il codice da inserire in modalità HTML

<div align="center"> <img width="149" height="109" style="cursor: -moz-zoom-in;" src="http://public.blu.livefilestore.com/y1pk4geuMwTW8kVzqWNvJ0LhmsuFw8cQdfEwrD54brZLjzBKc_BePuoN1rJOgQicJVv-OT0iwiEEVUwfIFfs0UGfQ/bicchieri3.jpg" onmouseover="this.width=596;this.height=435;" onmouseout="this.width=149;this.height=109;" title="titolo" alt="testo alternativo" /></div>

I dati possono essere personalizzati in questo modo

1. width="149" height="109" sono le dimensioni iniziali della immagine
2. width=596; e height=435; sono le dimensioni che assume quando si passa sopra con il mouse
3. L'URL in rosso è quello della immagine e deve essere sostituito
4. Il tag Title e Alt si inseriscono come al solito per dare un nome alla immagine e in ottica SEO
5. <div align="center"> e </div> servono per centrare l'immagine nel layout della pagina. Se si tolgono le due righe si visualizzerà in linea con il testo mentre se si sostituisce center con right o left la foto sarà spostata rispettivamente tutta sulla destra o sulla sinistra.

Ecco un esempio pratico di come funziona questo codice

Se provate a passarci sopra con il mouse l'immagine aumenterà le sue dimensioni. Quando si inseriscono la larghezza e l'altezza della miniatura, bisogna fare in modo che siano mantenute le proporzioni originali altrimenti l'immagine verrà distorta.

Immagine che si ingrandisce con un click e ritorna normale con un doppio click

Con questo effetto per ingrandire la foto dobbiamo cliccarci sopra. Di seguito riporto il codice da incollare in modalità HTML

<div align="center">
<img width="149" height="109" style="cursor: -moz-zoom-in;" src="https://public.blu.livefilestore.com/y1pk4geuMwTW8kVzqWNvJ0LhmsuFw8cQdfEwrD54brZLjzBKc_BePuoN1rJOgQicJVv-OT0iwiEEVUwfIFfs0UGfQ/bicchieri3.jpg" onclick="this.width=596;this.height=435;" ondblclick="this.width=149;this.height=109;" title="titolo" alt="testo alternativo" /></div>

Le personalizzazioni sono le stesse di prima e quindi non sto a ripetermi.