• Programmazione » HTML » Dhtml - Tutorial e lezioni per imparare il Dynamic HTML

Grazie ad un semplice codice Javascript e dellefunzioni legate all'interazione con i Css,possiamo creare una piccola utility Dhtml per effettuare ilcosiddetto zoom-in ed il zoom-out suun'immagine prestabilita, ovvero aumentare e diminuire lesue dimensioni di un tot specificato.

Iniziamo a creare un'immagine a cui assegniamo unid ed un name

<p align="center"><img src="foto.jpg" id="foto" name="foto"></p>

Dopo aver creato l'immagine utilizziamo questo scriptcorredato di opportuni commenti

<script language="javascript">    <!--    var dimensioni = document.foto.style.width; // Recupero la larghezza dell'immagine utilizzando il name    dimensioni = 200; // Imposto la larghezza a 200 pixel    var aumenta = 10; // Effettuo lo zoom-in e lo zoom-out per 10 pixel    function ZoomIn()    {// Aumento le dimensioni dell'immagine e reimposto la variabile di riferimento  foto.style.width = dimensioni + aumenta;  dimensioni += aumenta;    }    function ZoomOut()    {// Diminuisco le dimensioni dell'immagine e reimposto la variabile di riferimento  foto.style.width = dimensioni - aumenta;  dimensioni -= aumenta;    }    //--></script>

Richiamo le funzioni ZoomIn() e ZoomOut() suibottoni

<p align="center">    <input type="button" value="Zoom + " onclick="ZoomIn()">    <input type="button" value="Zoom -" onclick="ZoomOut()"></p>

Nello script ho fatto riferimento solo alla larghezzadell'immagine e non anche all'altezza perchèaumentando l'una l'altra aumenta di proporzione diconseguenza.