OVERVLOEIER 4

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 4

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

var agkleur="white"

//hieronder niets wijzigen
 
var overvloeiarray=new Array() 
var overvloeiclear=new Array()
 
var dom=(document.getElementById) 
var iebrowser=document.all
 
function diashow(afbeeldingen, breedte, hoogte, randdikte, tussentijd, pauzeren, volgorde){
this.pauzerencheck=pauzeren
this.muisovercheck=0
this.tussentijd=tussentijd
this.minimumwaarde=10 
this.huidigbeeldindex=0
this.volgendbeeldindex=1
overvloeiarray[overvloeiarray.length]=this
this.diashowid=overvloeiarray.length-1
this.canvasbasis="canvas"+this.diashowid
this.deze_canvas=this.canvasbasis+"_0"
if (typeof volgorde!="undefined")
afbeeldingen.sort(function() {return 0.5 - Math.random();}) 
this.afbeeldingen=afbeeldingen
this.beeldrand=parseInt(randdikte)
this.toon_beeld=new Array() 
for (p=0;p<afbeeldingen.length;p++){
this.toon_beeld[p]=new Image()
this.toon_beeld[p].src=afbeeldingen[p][0]
}
 
var breedte=breedte+this.beeldrand*2
var hoogte=hoogte+this.beeldrand*2
 
if (iebrowser&&dom||dom) 
document.write('<div id="master'+this.diashowid+'" style="position:relative;width:'+breedte+'px;height:'+hoogte+'px;overflow:hidden;"><div id="'+this.canvasbasis+'_0" style="position:absolute;width:'+breedte+'px;height:'+hoogte+'px;top:0;left:0;filter:progid:DXImageTransform.Microsoft.alpha(opacity=10);opacity:0.1;-moz-opacity:0.1;-khtml-opacity:0.1;background-color:'+agkleur+'"></div><div id="'+this.canvasbasis+'_1" style="position:absolute;width:'+breedte+'px;height:'+hoogte+'px;top:0;left:0;filter:progid:DXImageTransform.Microsoft.alpha(opacity=10);opacity:0.1;-moz-opacity:0.1;-khtml-opacity:0.1;background-color:'+agkleur+'"></div></div>')
else
document.write('<div><img name="defaultslide'+this.diashowid+'" src="'+this.toon_beeld[0].src+'"></div>')
 
if (iebrowser&&dom||dom)
this.starten()
else{
this.huidigbeeldindex++
setInterval("overvloeiarray["+this.diashowid+"].wissel_beeld()", this.tussentijd)
}
}

function faden(obj){
if (obj.minimumwaarde<100){
obj.minimumwaarde+=10
if (obj.tempobj.filters&&obj.tempobj.filters[0]){
if (typeof obj.tempobj.filters[0].opacity=="number") 
obj.tempobj.filters[0].opacity=obj.minimumwaarde
else 
obj.tempobj.style.filter="alpha(opacity="+obj.minimumwaarde+")"
}
else if (obj.tempobj.style.MozOpacity)
obj.tempobj.style.MozOpacity=obj.minimumwaarde/101
else if (obj.tempobj.style.KhtmlOpacity)
obj.tempobj.style.KhtmlOpacity=obj.minimumwaarde/100
else if (obj.tempobj.style.opacity&&!obj.tempobj.filters)
obj.tempobj.style.opacity=obj.minimumwaarde/101
}
else{
clearInterval(overvloeiclear[obj.diashowid])
obj.volgende_canvas=(obj.deze_canvas==obj.canvasbasis+"_0")? obj.canvasbasis+"_0" : obj.canvasbasis+"_1"
obj.tempobj=iebrowser? iebrowser[obj.volgende_canvas] : document.getElementById(obj.volgende_canvas)
obj.populateslide(obj.tempobj, obj.volgendbeeldindex)
obj.volgendbeeldindex=(obj.volgendbeeldindex<obj.toon_beeld.length-1)? obj.volgendbeeldindex+1 : 0
setTimeout("overvloeiarray["+obj.diashowid+"].wissel_beeld()", obj.tussentijd)
}
}
 
diashow.prototype.populateslide=function(picobj, beeldindex){
var slideHTML=""
if (this.afbeeldingen[beeldindex][1]!="")
slideHTML='<a href="'+this.afbeeldingen[beeldindex][1]+'" target="'+this.afbeeldingen[beeldindex][2]+'">'
slideHTML+='<img src="'+this.toon_beeld[beeldindex].src+'" border="'+this.beeldrand+'px">'
if (this.afbeeldingen[beeldindex][1]!="")
slideHTML+='</a>'
picobj.innerHTML=slideHTML
}
 
 
diashow.prototype.wissel_beeld=function(){
if (this.pauzerencheck==1) //waarde pauzeren bij muisover = 1, indien niet gewenst = 0 
var cacheobj=this
if (this.muisovercheck==1)
setTimeout(function(){cacheobj.wissel_beeld()}, 100)
else if (iebrowser&&dom||dom){
this.resetit()
var crossobj=this.tempobj=iebrowser? iebrowser[this.deze_canvas] : document.getElementById(this.deze_canvas)
crossobj.style.zIndex++
overvloeiclear[this.diashowid]=setInterval("faden(overvloeiarray["+this.diashowid+"])",50)
this.deze_canvas=(this.deze_canvas==this.canvasbasis+"_0")? this.canvasbasis+"_1" : this.canvasbasis+"_0"
}
else{
var ns4imgobj=document.images['defaultslide'+this.diashowid]
ns4imgobj.src=this.toon_beeld[this.huidigbeeldindex].src
}
this.huidigbeeldindex=(this.huidigbeeldindex<this.toon_beeld.length-1)? this.huidigbeeldindex+1 : 0
}
 
diashow.prototype.resetit=function(){
this.minimumwaarde=10
var crossobj=iebrowser? iebrowser[this.deze_canvas] : document.getElementById(this.deze_canvas)
if (crossobj.filters&&crossobj.filters[0]){
if (typeof crossobj.filters[0].opacity=="number") 
crossobj.filters(0).opacity=this.minimumwaarde
else 
crossobj.style.filter="alpha(opacity="+this.minimumwaarde+")"
}
else if (crossobj.style.MozOpacity)
crossobj.style.MozOpacity=this.minimumwaarde/101
else if (crossobj.style.KhtmlOpacity)
crossobj.style.KhtmlOpacity=this.minimumwaarde/100
else if (crossobj.style.opacity&&!crossobj.filters)
crossobj.style.opacity=this.minimumwaarde/101
}
 
 
diashow.prototype.starten=function(){
var crossobj=iebrowser? iebrowser[this.deze_canvas] : document.getElementById(this.deze_canvas)
this.populateslide(crossobj, this.huidigbeeldindex)
if (this.pauzerencheck==1){
var cacheobj=this
var crossobjcontainer=iebrowser? iebrowser["master"+this.diashowid] : document.getElementById("master"+this.diashowid)
crossobjcontainer.onmouseover=function(){cacheobj.muisovercheck=1}
crossobjcontainer.onmouseout=function(){cacheobj.muisovercheck=0}
}
this.wissel_beeld()
}

</script>

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

De afbeeldingen worden gecentreerd weergegeven, bij muisover wordt het overvloeien gepauzeerd, toevoegen van hyperlink en target voorzien, mogelijkheid om meerdere diavoorstellingen tegelijkertijd weer te geven (door een andere arraynaam toe te voegen), afbeeldingen kunnen in willekeurige volgorde weergegeven worden (zie optie in body-gedeelte).

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