fotoboek

JavaScripts knippen en plakken

Op deze website vind je javascripts die je door eenvoudig knippen en plakken aan jouw site kunt toevoegen.

Home CSS DHTML Forum E-mail Sitezoeker Links

Fotoboek

1. Plaats binnenin de <BODY>-tag: <body onload="fotoboek()">

2. Kopieer deze code en plaats ze in het BODY-gedeelte van je pagina :

<script type="text/javascript">
// dit kun je wijzigen
	var Beeldbreedte=116;
	var Beeldhoogte=118;
	var Rand=true;
	var Randkleur="silver";
	var Snelheid=15;
	var Pauze=1500; // 1 seconde = 1000
	var Verticaal=0;	
// hier plaats je de afbeeldingen
	Afbeeldingen=new Array(
		"foto1.jpg","#",
		"foto2.jpg","#",
		"foto3.jpg","#",
		"../pics/foto4.jpg","#" // geen komma na laatste regel!
		);
// Hieronder niets wijzigen
	var BLI,BMI,BRI,BTI,HOEK=0,AFBC=6,MAXB,RICHTING=1;
	var B_MSz,HALT=false;AFBV=new Array(Afbeeldingen.length);

function fotoboek(){
		if(document.getElementById){
			for(i=0;i<Afbeeldingen.length;i+=2){
				AFBV[i]=new Image();AFBV[i].src=Afbeeldingen[i]}
			BoekDiv=document.getElementById("Boek");
			BLI=document.createElement("img");BoekDiv.appendChild(BLI);	
			BRI=document.createElement("img");BoekDiv.appendChild(BRI);
			BMI=document.createElement("img");BoekDiv.appendChild(BMI);	
			BLI.style.position=BMI.style.position=BRI.style.position="absolute";
			BLI.style.zIndex=BRI.style.zIndex=0;BMI.style.zIndex=1;
			BLI.style.top=(Verticaal?Beeldhoogte+1:0)+"px";
			BLI.style.left=0+"px";
			BMI.style.top=0+"px";
			BMI.style.left=(Verticaal?0:Beeldbreedte+1)+"px";
			BRI.style.top=0+"px";
			BRI.style.left=(Verticaal?0:Beeldbreedte+1)+"px";
			BLI.style.height=Beeldhoogte+"px";
			BMI.style.height=Beeldhoogte+"px";
			BRI.style.height=Beeldhoogte+"px";
			BLI.style.width=Beeldbreedte+"px";
			BMI.style.width=Beeldbreedte+"px";
			BRI.style.width=Beeldbreedte+"px";
			if(Rand){
				BLI.style.borderStyle=BMI.style.borderStyle=BRI.style.borderStyle="solid";
				BLI.style.borderWidth=1+"px";
				BMI.style.borderWidth=1+"px";
				BRI.style.borderWidth=1+"px";
				BLI.style.borderColor=BMI.style.borderColor=BRI.style.borderColor=Randkleur}
			BLI.src=AFBV[0].src;
			BLI.lnk=Afbeeldingen[1];
			BMI.src=AFBV[2].src;
			BMI.lnk=Afbeeldingen[3];
			BRI.src=AFBV[4].src;
			BRI.lnk=Afbeeldingen[5];
			BLI.onclick=BMI.onclick=BRI.onclick=HYPERLINK;
			BLI.onmouseover=BMI.onmouseover=BRI.onmouseover=STOP;
			BLI.onmouseout=BMI.onmouseout=BRI.onmouseout=START;
			AFBEELDINGEN()}}

function AFBEELDINGEN(){
		if(!HALT){
			if(Verticaal){
				B_MSz=Math.abs(Math.round(Math.cos(HOEK)*Beeldhoogte));
				MidOffset=!RICHTING?Beeldhoogte+1:Beeldhoogte-B_MSz;
				BMI.style.top=MidOffset+"px";
				BMI.style.height=B_MSz+"px"}
			else{B_MSz=Math.abs(Math.round(Math.cos(HOEK)*Beeldbreedte));
				MidOffset=RICHTING?Beeldbreedte+1:Beeldbreedte-B_MSz;
				BMI.style.left=MidOffset+"px";
				BMI.style.width=B_MSz+"px"}
			HOEK+=Snelheid/720*Math.PI;
			if(HOEK>=Math.PI/2&&RICHTING){
				RICHTING=0;
				if(AFBC==Afbeeldingen.length)AFBC=0;
				BMI.src=AFBV[AFBC].src;
				BMI.lnk=Afbeeldingen[AFBC+1];
				AFBC+=2}
			if(HOEK>=Math.PI){
				RICHTING=1;
				BTI=BLI;
				BLI=BMI;
				BMI=BTI;
				if(Verticaal)BMI.style.top=0+"px";
				else BMI.style.left=Beeldbreedte+1+"px";			
				BMI.src=BRI.src;
				BMI.lnk=BRI.lnk;

setTimeout("PAUZEREN()",Pauze)}
			else setTimeout("AFBEELDINGEN()",50)}
		else setTimeout("AFBEELDINGEN()",50)}

function PAUZEREN(){
			if(AFBC==Afbeeldingen.length)AFBC=0;
			BRI.src=AFBV[AFBC].src;
			BRI.lnk=Afbeeldingen[AFBC+1];
			BMI.style.zIndex=2;
			BLI.style.zIndex=1;
			HOEK=0;
			AFBC+=2;
		setTimeout("AFBEELDINGEN()",50)}

function HYPERLINK(){if(this.lnk)window.location.href=this.lnk}
	function STOP(){HALT=true;this.style.cursor=this.lnk?"pointer":"default"}
	function START(){HALT=false}
</script>
<center>
	<div id="Boek" style="position:relative">
		<img src="transparent.gif" width="220" height="120">
	</div>
</center>

3. Kopieer het figuurtje hieronder en sla het op als "transparent.gif". Het is onzichtbaar, maar je hebt het nodig om plaats te voorzien voor jouw fotoboek.

Op de plaats waar je wenst dat het fotoboek verschijnt, voeg je in:
<div id="Boek" style="position:relative">
<img src="transparent.gif" width="220" height="120">
</div>
De breedte van het transparante beeldje stel je in op de volledige breedte van het fotoboek.

Copyright: Het internet is van iedereen, de volledige inhoud van deze site kan door iedereen vrij gebruikt worden.