Goedeavond Coderunner,
Misschien kan het simpelder, maar dit is de manier die ik gebruikt heb.
Voor het overvloeien van een Zwart Wit foto naar dezelfde foto maar dan in kleur heb ik het script gebruikt waarmee je een slideshow maakt van meerdere plaatjes die overvloeien..
(De afbeeldingen worden gecentreerd weergegeven, bij muisover wordt het overvloeien gepauzeerd, toevoegen van hyperlink en target voorzien)
1.
maak van je kleurenfoto een copie en maak er een zwart wit foto van.
2.
Kopieer deze code en plaats ze in het HEAD-gedeelte van je pagina :
<style type="text/css">
.centerdiv{ /*IE methode voor het centreren van een relatieve div*/
text-align: center;
}
.centerdiv>div{ /*normale methode voor het centreren van een relatieve div*/
margin: 0 auto;
}
</style>
<script type="text/javascript">
var afbeelding=new Array()
//plaats hier de verwijzing naar de afbeeldingen: ["(pad+)naam", "hyperlink", "target"]
afbeelding[0]=["
ZwartWit foto.jpg", "", ""]
afbeelding[1]=["
Kleuren foto2.jpg", "", ""]
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>
3. Kopieer deze code en plaats ze in het BODY-gedeelte van je pagina :
<div class="centerdiv">
<script type="text/javascript">
//new diashow(arraynaam, breedte, hoogte, randdikte, tussentijd, pauzeren (0=neen, 1=ja), optionele willekeurige volgorde = "R")
new diashow(afbeelding, 295, 207, 0, 1000, 1)
</script>
