Fare internet

E' come il lego, più pezzi ho più sono allegro
Seguci su Facebook Seguici su Twitter Iscrivita ai nostri Feed      Mandaci una mail

Ridimensionare un immagine con jQuery

Scritto da Fare-internet il 24 aprile 2010 condividi condividi

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:

<script src="js/jquery-1.4.2.min.js"></script>


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

<img src="img/patata.jpg" alt="Patata" height="52" width="38"
onmouseover="$(this).height(517);$(this).width(378)"
onmouseout="$(this).height(52);$(this).width(38)" />

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

Twitter