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

Corso jQuery
Creare applicazioni client-side col Framework jQuery

Scritto da Luca Ruggiero nella sezione Javascript

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>
Dopo aver creato l'immagine utilizziamo questo script corredato 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() sui bottoni
<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 larghezza dell'immagine e non anche all'altezza perchč aumentando l'una l'altra aumenta di proporzione di conseguenza.

I pił cliccati della sezione Javascript

:: jQuery Validation: validazione di un form con jQuery (107.912)

:: Breve guida a jQuery (98.602)

:: Le espressioni regolari in Javascript (84.989)

:: Gestione delle stringhe in Javascript (74.986)

:: Stampare una pagina col Dhtml (42.850)

:: Inserire in automatico lo slash nel formato data gg/mm/aaaa (41.642)

:: Menu orizzontale dinamico in Dhtml (37.187)

:: Gli Array in Javascript (35.935)

:: Temporizzazioni Javascript (31.623)

:: Istruzion condizionali in Javascript: if e switch (28.943)

IN EVIDENZA
DOWNLOAD