Hoi!
Ik heb van de volgende site een javascript gehaald waarmee je een soort fotoshow krijgt:
http://home.wanadoo.nl/java.script/diashow/test453.htm
Nu heb ik deze code iets bewerkt en dit is het resultaat zoals het in mijn webpagina staat:
Resultaat is dat ik wel de rij met thumbnails boven en onder krijg maar wanneer er een mouseover is over de thumbnails verschijnen ze niet in het groot in het midden!
Waar zit de fout in het script?
Ik heb zelf nooit iets geleerd over javascript en ik weet ook alleen hoe de src van de afbeeldingen te veranderen want dit verschilt niet van html.
Is er misschien ergens een klein foutje in het script?
Of moeten de foto's in dezelfde map staan? D.w.z.:
''bokken1.jpg''
i.p.v.
"../images/bokken1.jpg"
?
Ik heb van de volgende site een javascript gehaald waarmee je een soort fotoshow krijgt:
http://home.wanadoo.nl/java.script/diashow/test453.htm
Nu heb ik deze code iets bewerkt en dit is het resultaat zoals het in mijn webpagina staat:
HTML:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html lang="nl">
<head>
<title></title>
<meta name="author" content="R">
<link rel="stylesheet" type="text/css" href="../iframe.css">
<SCRIPT>
var afbeeldingen=new Array()
afbeeldingen[0]=["../images/bokken1.jpg", "#"]
afbeeldingen[1]=["../images/bokken1.jpg", "#"]
afbeeldingen[2]=["../images/bokken1.jpg", "#"]
afbeeldingen[3]=["../images/bokken1.jpg", "#"]
afbeeldingen[4]=["../images/bokken1.jpg", "#"]
afbeeldingen[5]=["../images/bokken1.jpg", "#"]
afbeeldingen[6]=["../images/bokken1.jpg", "#"]
afbeeldingen[7]=["../images/bokken1.jpg", "#"]
afbeeldingen[8]=["../images/bokken1.jpg", "#"]
afbeeldingen[9]=["../images/bokken1.jpg", "#"]
afbeeldingen[10]=["../images/bokken1.jpg", "#"]
var voorladen="nee" // "ja" of "nee"
var optlinktarget="" // optioneel: hier kun je een doel invullen bij framesgebruik
var beeldrandbreedte=0
var filterstring="progid:DXImageTransform.Microsoft.GradientWipe(GradientSize=1.0 Duration=0.7)"
if (voorladen=="ja"){
for (x=0; x<afbeeldingen.length; x++){
var ditbeeldje=new Image()
ditbeeldje.src=afbeeldingen[x][0]}}
function beeldcode(dezeafbeelding){
var beeldhtml=""
if (dezeafbeelding[1]!="")
beeldhtml='<a href="'+dezeafbeelding[1]+'" target="'+optlinktarget+'">'
beeldhtml+='<img src="'+dezeafbeelding[0]+'" border="'+beeldrandbreedte+'">'
if (dezeafbeelding[1]!="")
beeldhtml+='</a>'
return beeldhtml}
function wijzigbeeld(beeldplaatsing, beeldindex){
if (document.getElementById){
var imgobj=document.getElementById(beeldplaatsing)
if (imgobj.filters && window.createPopup){
imgobj.style.filter=filterstring
imgobj.filters[0].Apply()}
imgobj.innerHTML=beeldcode(afbeeldingen[beeldindex])
if (imgobj.filters && window.createPopup)
imgobj.filters[0].Play()
return false}}
</SCRIPT>
</head>
<body class="body">
<table cellpadding="0" cellspacing="0" width="100%">
<tr>
<td>
<h1>Bokken</h1>
... bla bla ...<br>
... bla bla ...<br>
</td>
</tr>
<tr>
<td>
<CENTER>
<A onmouseover="wijzigbeeld('beeldplaatsing',0)" href=""><IMG height=45 src="../images/bokken1thumbnail.jpg" width=60 border=0></A>
<A onmouseover="wijzigbeeld('beeldplaatsing',1)" href=""><IMG height=45 src="../images/bokken1thumbnail.jpg" width=60 border=0></A>
<A onmouseover="wijzigbeeld('beeldplaatsing',2)" href=""><IMG height=45 src="../images/bokken1thumbnail.jpg" width=60 border=0></A>
<A onmouseover="wijzigbeeld('beeldplaatsing',3)" href=""><IMG height=45 src="../images/bokken1thumbnail.jpg" width=60 border=0></A>
<A onmouseover="wijzigbeeld('beeldplaatsing',4)" href=""><IMG height=45 src="../images/bokken1thumbnail.jpg" width=60 border=0></A>
<A onmouseover="wijzigbeeld('beeldplaatsing',5)" href=""><IMG height=45 src="../images/bokken1thumbnail.jpg" width=60 border=0></A>
<CENTER>
<DIV id=beeldplaatsing style="WIDTH: 500px; HEIGHT: 300px" ;></DIV>
</CENTER>
<A onmouseover="wijzigbeeld('beeldplaatsing',6)" href=""><IMG height=45 src="../images/bokken1thumbnail.jpg" width=60 border=0></A>
<A onmouseover="wijzigbeeld('beeldplaatsing',7)" href=""><IMG height=45 src="../images/bokken1thumbnail.jpg" width=60 border=0></A>
<A onmouseover="wijzigbeeld('beeldplaatsing',8)" href=""><IMG height=45 src="../images/bokken1thumbnail.jpg" width=60 border=0></A>
<A onmouseover="wijzigbeeld('beeldplaatsing',9)" href=""><IMG height=45 src="../images/bokken1thumbnail.jpg" width=60 border=0></A>
<A onmouseover="wijzigbeeld('beeldplaatsing',10)" href=""><IMG height=45 src="../images/bokken1thumbnail.jpg" width=60 border=0></A>
</CENTER>
</td>
</tr>
</table>
</body>
</html>Resultaat is dat ik wel de rij met thumbnails boven en onder krijg maar wanneer er een mouseover is over de thumbnails verschijnen ze niet in het groot in het midden!
Waar zit de fout in het script?
Ik heb zelf nooit iets geleerd over javascript en ik weet ook alleen hoe de src van de afbeeldingen te veranderen want dit verschilt niet van html.
Is er misschien ergens een klein foutje in het script?
Of moeten de foto's in dezelfde map staan? D.w.z.:
''bokken1.jpg''
i.p.v.
"../images/bokken1.jpg"
?
Laatst bewerkt:
