Script Sfoglia Immagini Automatico su scripting di WebLink

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

Funziona con il Browser:

firefox

Safari

opera

internet explorer

netscape navigator

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

Descrizione: Effetto grafico sfoglia libro Orizzontale o verticale, le immagini usate sono affiancate in modo da formare le pagine del libro ed è possibile cliccarci sopra, ad esse è infatti collegato (opzionalmente) un link.

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>.

// 7 variables to control behavior
	var Book_Image_Width=140;
	var Book_Image_Height=225;
	var Book_Border=true;
	var Book_Border_Color="gray";
	var Book_Speed=15;
	var Book_NextPage_Delay=1500; //1 second=1000
	var Book_Vertical_Turn=0;

// array to specify images and optional links. At least 4
// If Link is not needed keep it ""

Book_Image_Sources=new Array(
		"photo1.jpg","http://www.ilmioforum.com",
		"photo2.jpg","http://www.web-link.it",
		"photo3.jpg","", //this slide isn't linked
		"photo4.jpg","http://www.web-link.it/xhtml" // NOTE No comma after last line
		);

/***************** DO NOT EDIT BELOW **********************************/
	var B_LI,B_MI,B_RI,B_TI,B_Angle=0,B_CrImg=6,B_MaxW,B_Direction=1;
	var B_MSz,B_Stppd=false;B_Pre_Img=new Array(Book_Image_Sources.length);

setTimeout("Book_Next_Delay()",Book_NextPage_Delay)}
			else setTimeout("BookImages()",50)}
		else setTimeout("BookImages()",50)}

function Book_Next_Delay(){
			if(B_CrImg==Book_Image_Sources.length)B_CrImg=0;
			B_RI.src=B_Pre_Img[B_CrImg].src;
			B_RI.lnk=Book_Image_Sources[B_CrImg+1];
			B_MI.style.zIndex=2;
			B_LI.style.zIndex=1;
			B_Angle=0;
			B_CrImg+=2;
		setTimeout("BookImages()",50)}

function B_LdLnk(){if(this.lnk)window.location.href=this.lnk}
	function B_Stp(){B_Stppd=true;this.style.cursor=this.lnk?"pointer":"default"}
	function B_Rstrt(){B_Stppd=false}
// end  -->	
</script>

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>.

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>

Note : Vi serve questa immagine trasparente 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.

Elenco completo degli script.

Puoi lasciarmi un msg, un suggerimento, una critica, un link.

Anche il tuo sito puo far parte di questo spazio pubblicitario

Clicca qui se vuoi informazioni per fare anche tu pubblicità su questo sito