HOME

Contatti

VARIARE LE DIMENSIONI UN'IMMAGINE CON TRE PULSANTI



Risposta alla domanda numero 60

Innanzitutto vediamo l'effetto proposto.
In alto abbiamo tre pulsanti: un clic su quello di sinistra fa rimpicciolire l'immagine del 20%, un clic su quello di destra fa ingrandire l'immagine del 20%, infine un clic su quello di centro riporta l'immagine alle sue dimensioni originali.

 

CODICE

<input type=button value = "-" onClick = "document.getElementById('imma').width = document.getElementById('imma').width * 0.8">
<input type=button value = "||" onClick = "document.getElementById('imma').width = '75'">
<input type=button value = "+" onClick = "document.getElementById('imma').width = document.getElementById('imma').width * 1.20">

<img src="T3.gif" border="1" id="imma" width="75">

SPIEGAZIONE

T3.gif

č il nome dell'immagine che abbiamo inserito noi: sostituetelo con il nome della vostra immagine aggiungendo anche l'URL completo

ARGOMENTI CORRELATI

Lasciare invariata la pagina mentre si ingrandisce un'immagine

mediante tabelle
mediante div
Ingrandire un'immagine al passaggio del mouse
Adattare l'immagine di sfondo alla pagina
Ingrandire un'immagine in una finestra con barre di scorrimento colorate
Inserire una piccola immagine di sfondo che non si duplichi
Creare un visualizzatore di immagini con commento
Aprire un'immagine ingrandita in una finestra pop up delle giuste dimensioni
Aprire un'immagine ingrandita in una finestra pop up anche con l'aggiunta di un form per l'acquisto
Stampare solo un'immagine a scelta
Cambiare immagine a seconda dell'ora o a seconda del giorno
Creare una striscia di immagini che scorrono
Fermare immagini scorrevoli
Due visualizzatori in una pagina
Da un'anteprima d'immagine ad un filmato
Sfondo fisso in un'area di testo
Cambiare lo sfondo con un colore a scelta
Scritta scorrevole sopra un'immagine
Album automatico con sottofondo musicale
Aggiungere commenti e didascalia ad un'immagine

imma

č l'identificativo che abbiamo dato all'immagine: č indispensabile per il funzionamento del programma.

75

č la larghezza di base dell'immagine: sostituitelo con la larghezza della vostra.

document.getElementById('imma').width

č il modo per riferirsi alla larghezza dell'immagine che ha identificativo = 'imma'

= document.getElementById('imma').width * 0.8

l'immagine diventa l'80% di se stessa, cioč diminuisce del 20%. Cambiate il valore come preferite.

= '75'

l'immagine ha larghezza di 75 pixel, cioč torna alle dimensioni originali.

= document.getElementById('imma').width * 1.2

l'immagine diventa il 120% di se stessa, cioč aumenta del 20%. Cambiate il valore come preferite.

onClick =

gli eventi sono attivati dal clic del mouse


©2012 www.webfract.it