Il sito per imparare gratuitamente a fare pagine Web

JavaScript E12
















E12 - Sfoglia Immagini Automatico orizzontale o verticale. Immagini cliccabili con collegamento a links.


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

Crediti:
Name: Ger Versluis
Website: http://www.dynamicdrive.com


Descrizione: Effetto grafico sfoglia libro Verticale o Orizzontale. Le immagini usate sono affiancate in modo da formare le pagine del libro ed è possibile cliccarle, ad esse è infatti collegato (opzionalmente) un link valido e funzionante.


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 nel punto esatto in cui deve apparire l'effetto, fra i tags <body> e </body>.

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, posizionatelo nella vostra pagina nel punto esatto in cui deve apparire l'effetto, fra i tags <body> e </body>.

seleziona tutto



Passo 3 :

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, sostituitelo al vostro attuale tag <body>

seleziona tutto

Note : Vi serve questa immagine questa è l'immagine trasparentetrasparente che si chiama placeholder.gif si trova in quello spazio fra la parola immagine e trasparente, non si vede essendo trasparente, cliccateci sopra col tasto destro e salvatela nella cartella dove metterete la pagina con lo script.

Adesso assegnategli una dimensione in larghezza ed altezza pari a quella delle immagini che intendete adoperare aggiungendo + 2 pixel in orizzontale che diventano 4 essendo due immagini affiancate e + 2 pixel in verticale. Praticamente se la vostra immagine ha dimensioni come queste che ho usato io: 140 x 225 pixel le dimensioni da settare all'immagine trasparente per uno sfoglia orizzontale saranno: width="144" ed height="227"

Per personalizzarlo trovate ad inizio script 7 variabili che servono:

var Book_Image_Width=140; - larghezza delle vostre immagini

var Book_Image_Height=225; - altezza delel vostre immagini

var Book_Border=true; - bordo di separazione true (si) o false (no)

var Book_Border_Color="gray"; - colore del bordo, grigio in questo caso

var Book_Speed=15; - velocità di animazione sfoglia

var Book_NextPage_Delay=1500; //1 secondi=1000 ritardo tra una pagina e l'altra

var Book_Vertical_Turn=0; - tipo di animazione 0 orizzontale 1 verticale.


E' inoltre possibile assegnare alle immagini un link inserendolo subito sotto le variabili, dove andrete a specificare il nome delle immagini da adoperare, questi url dovranno essere separati da una virgola, tutti, tranne l'ultimo. Nel caso in cui non vogliate alcun link lasciate le doppie virgolette vuote:

"photo2.jpg","http://www.web-link.it", la foto 2, se cliccata porterà al sito web-link.it

"photo3.jpg","", questa foto 3 invece non avrà alcun link e non apparirà neppure la mano tipica dei link passando sopra l'immagine durante la sua animazione.




Valutazione

Valutazione: 2.21 stelle su 5
N. Voti: (68)



  Elenco completo degli script.



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