Il sito per imparare gratuitamente a fare pagine Web

JavaScript E1
















E1 - Espandere le immagini al passaggio del mouse.


Funziona con il Browser:  Firefox firefox   Safari Safari   Opera opera   IE internet explorer   Chr Chrome

Crediti: John Davenport Scheuer
Name: jscheuer1
Website: dynamicdrive


Descrizione: Espandere, o ingrandire, immagini grafiche al solo passaggio del puntatore del mouse. Provate a portare il cursore del vostro mouse sulle immagini riportate sotto e vedete cosa succede.


Passo 1 :

Selezionare tutto il codice cliccando sulla forbice, quindi posizionatevi sul testo evidenziato, adoperate il tasto destro del mouse per l'operazione di copia ed incolla, posizionatelo nella vostra pagina fra i tags <head> e </head>.

seleziona tutto



Passo 2 :

Salvate nella stessa cartella dove avete la pagina web questo file: expando.js sufficiente cliccare sopra al link col tasto destro e scegliere salva oggetto con nome o salva destinazione con nome, dipende dal browser adoperato.




Passo 3 :

Non vi resta che assegnare alle vostre immagini la classe expando, se vi fa comodo il mio esempio, selezionare tutto il codice cliccando sulla forbice, quindi posizionatevi sul testo evidenziato, adoperate il tasto destro del mouse per l'operazione di copia ed incolla, posizionatelo nella vostra pagina fra i tags <body> e </body>.

seleziona tutto

Note : Assegnate alle vostre immagini delle dimensioni pi piccole di quelle reali, in modo da poter vedere l'effetto di espansione. Se per esempio le dimensioni reali della vostra immagine fossero 500 x 400 pixel, si potrebbe usare width="250" height="200" avendo un'espansione pari al doppio.

Nel css trovate vertical-align: top; sostituendo top con altro parametro valido, per esempio bottom, possibile cambiare la direzione dell'effetto espansione.



Valutazione

Valutazione: 3.55 stelle su 5
N. Voti: (146)



  Elenco completo degli script.



Se avete domande da fare potete scrivere sul forum di supporto , gratuito e aperto a tutti.