overvloeier 3

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

OVERVLOEIER 3

Deze overvloeier is geschikt voor afbeeldingen met verschillende afmetingen

1. Kopieer deze code en plaats ze in het HEAD-gedeelte van je pagina :

<script type="text/javascript">

var images = new Array(
'foto1.jpg',
'foto2.jpg',
'foto3.jpg',
'foto4.jpg',
'foto5.jpg'	
);
var teller = 1;
var pauze = 1500;

function opacWaarde(el, opacity) {
	opacity /= 100;
	el.style.opacity = opacity;
	el.style.MozOpacity = opacity;
	el.style.filter = "alpha(opacity=" + (opacity*100) + ")";}

function fadeBeeld(el, currentOpacity) {
	currentOpacity += 5;
	if (currentOpacity > 100) {
		opacWaarde(el, 100);
		var prevEl = el.previousSibling ? el.previousSibling : el.parentNode.lastChild;
		prevEl.style.visibility = 'hidden';
		el.style.zIndex = 1;
		window.setTimeout(startFaden, pauze);}
	else {
		opacWaarde(el, currentOpacity);
		window.setTimeout(function() { fadeBeeld(el, currentOpacity); }, 50);}}

function startFaden() {
	var el = document.getElementById('beeldcontainer').childNodes[teller];
	el.style.visibility = 'visible';
	el.style.zIndex = 2;
	opacWaarde(el, 0);
	fadeBeeld(el,0);
	teller = (teller < images.length-1) ? teller + 1 : 0;}

function startScript() {
	var el = document.getElementById('beeldcontainer');
	while (el.firstChild) { el.removeChild(el.firstChild); }
	for(var i=0; i<images.length; i++) {
		var t = document.createElement('IMG');
		t.setAttribute('src',images[i]);
		t.style.position = 'absolute';
		t.style.visibility = 'hidden';
		el.appendChild(t);}
	el.firstChild.style.visibility = 'visible';
	window.setTimeout(startFaden, pauze);}
	
window.onload=startScript;	
</script>

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

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