Effettuare lo zoom-in e lo zoom-out su un'immagine coi Css

Autore: Luca Ruggiero | Tell a Friend Corso Java Impara a programmare col linguaggio OOP della Sun. Corso Javascript e DHTML Impara a creare controlli ed animazioni! Corso Web Design Disegno di siti Web con HTML, CSS e Dynamic HTML.

Grazie ad un semplice codice Javascript e delle funzioni legate all'interazione con i Css, possiamo creare una piccola utility Dhtml per effettuare il cosiddetto zoom-in ed il zoom-out su un'immagine prestabilita, ovvero aumentare e diminuire le sue dimensioni di un tot specificato.

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

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

<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>

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