ZW foto overvloeien naar gekleurde foto-opgelost+

[Moria]

Goedeavond,

Nog een vraagje ivm met foto's.

Kan ik door middel van html, of javaschript, een zw foto laten overvloeien naar dezelfde foto maar dan de gekleurde versie.

Wat dus de indruk geeft dat de zw foto traagjes een gekleurde foto wordt

fijne avond iedereen.

[Moria]

gevonden..script gebruikt van mijn vorige vraag over meerdere overvloeiers op 1 pagina..heb het dus met het script van de overvloeier gedaan.

Misschien kan iemand me toch naar een link verwijzen over hoe men met html effecten met plaatjes kan maken ?

[coderunner]

Beste Moria,

...een zw foto laten overvloeien naar dezelfde foto maar dan de gekleurde versie...
...gevonden..

Wil je het aangepaste javascript hier plaatsen en delen met andere gebruikers van het forum zodat ook zij kunnen zien hoe je dat gedaan hebt? Is zeker geen verplichting maar wel handig voor andere forum gebruikers die dat ook graag willen gebruiken

... een link over hoe men met html effecten met plaatjes kan maken ?

Bedoel je hiermee javascript codes of andere mogelijkheden in html.
Bedoel zoiets als : zoek in google (of ander zoekmachine) naar "html image effects" ?

mvg,
Coderunner

[Moria]

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>

[coderunner]

Bedankt Moria, nu weten andere seniorennetgebruikers ook hoe je het gedaan hebt

mvg,
Coderunner

[Moria]

Met plezier gedaan