Ridimensionare un immagine con jQuery

Loading

L’operazione di ridimensionamento di un immagine con jQuery è estrmamente semplice, nel nostro esempio l’effetto che vogliamo ottenere è che al passaggio del mouse l’immagine si ingrandisca, e quando usciamo dall’immagine con il mouse l’immagine ritorni piccola.
Come sempre quando utilizziamo jQuery dobbiamo caricarcare lo script, supponendo che sia nella cartella js, all’interno del tag head inseriamo:


Fatto questo non ci resta altro che inserire all’interno del body il codice dell’immagine.

Patata

L’immagine tramite gli attributi height e width è inizialmente visualizzata ad un decimo delle sue dimensioni originali.
Quando ci si passa sopra con il mouse viene eseguito il codice relativo a questo evento, ossia relativo all’evento onmouseover:

onmouseover="$(this).height(517);$(this).width(378)"

Il risultato è che l’oggetto in questione individuato da $(this) viene ridimensionato ad un altezza di 517 pixel (la sua altezza effettiva) ed a una larghezza di 378 pixel (altezza effettiva).
In maniera del tutto analoga per riportarlo alle dimensioni ridotte viene utilizzato il seguente codice:

onmouseout="$(this).height(52);$(this).width(38)"

Per vedere una demo
Per scaricare il sorgente