Il sito per imparare gratuitamente a fare pagine Web

JavaScript E5
















E5 - Slideshow con effetto Zoom e Rotazione tramite CSS3.


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

Crediti:
Name: Peter Gehrig
Website: www.fabulant.com

Descrizione: Uno Slideshow con effetto zoom e rotazione, le immagini possono essere accompagnate da un titolo ed Ŕ possibile renderle cliccabili come normalissimi links. I browser che non supportano i CSS3 vedranno solo l'effetto zoom ma non la rotazione.





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, non vi rimane che trasferire il tutto nella vostra pagina web, in questo caso fra i tags: <head> </head>.

seleziona tutto





Passo 2 :

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, non vi rimane che trasferire il tutto nella vostra pagina web, fra i tags: <body> e </body>.

seleziona tutto


Note : Nel codice CSS trovate due classi: .textboxstyle e .textboxbackgroundstyle per impostare il testo dei titoli ed il suo sfondo. Potete agire su tutti i paramentrei a vostra disposizione.

Nelle prime righe del codice javascript trovate dei blocchi di codice come questo:

{
imgsrc : "weblink.jpg",
message : "nome 1",
linkto : "http://www.web-link.it"
}, // comma required


Potete inserire tanti blocchi quante sono le immagini da visualizzare dove: imgsrc = nome immagine completo di URL, message = il nome o il titolo dell'immagine, linkto = url raggiungibile facendo click su quella immagine. Attenzione: ogni blocco che inizia con { e termina con } deve essere terminato con una virgola , fatta eccezione per il solo ultimo blocco, quindi solo l'ultima immagine non dovrÓ avere alcuna virgola.

var target_url="_blank"
Impostare la destinazione del link ("_blank", "_top", "_self", "_parent" or "name_del_tuo_frame")

var imgwidth=200
var imgheight=150

Larghezza ed Altezza in pixel delle immagini adoperate.

var textheight=20
Dimensione del box per il testo in pixels.

var opacitystrength=60
Impostazione valore trasparenza da 0 a 100.

var pause=2
Impostazione pausa ri rotazione in secondi.





Valutazione

Valutazione: 1.97 stelle su 5
N. Voti: (58)



  Elenco completo degli script.



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