javascript fotoschuifbeeld

Status
Niet open voor verdere reacties.

antwan

Gebruiker
Lid geworden
20 apr 2007
Berichten
29
Hallo mensen,

Ik wil een javascript voor mij website gebruiken het gaat om het javascript dat de foto's zeg maar in een schuifbeeld zitten hier kun je het zien: klik

Het probleem is dat ik de afbeeldingen niet daarin krijg dus ik krijg de afbeelding niet in dat venstertje. weet iemand hoe dat moet?

hieronder het javascript:

PHP:
<script language="JavaScript1.2">
//Instellen van het veld:
var breedte=300
var hoogte=105
var snelheid=1
agrondkleur="#FFFFFF"
//Invoegen van de afbeeldingen met eventuele hyperlinks:
var afbeelding=new Array()
afbeelding[0]='<a href="#"><img src="foto1.jpg" width=150 height=100 border=0></a>'
afbeelding[1]='<a href="#"><img src="foto2.jpg" width=150 height=100 border=0></a>'
afbeelding[2]='<a href="#"><img src="foto3.jpg" width=150 height=100 border=0></a>'
afbeelding[3]='<a href="#"><img src="foto4.jpg" width=150 height=100 border=0></a>'
afbeelding[4]='<a href="#"><img src="foto5.jpg" width=150 height=100 border=0></a>'

//Hieronder niets wijzigen
var kopieersnelheid=snelheid
afbeelding='<nobr>'+afbeelding.join(" ")+'</nobr>'
var iedom=document.all||document.getElementById
if (iedom)
document.write('<span id="temp" style="visibility:hidden;position:absolute;top:-100;left:-3000">'+afbeelding+'</span>')
var huidige_breedte=''

function opvullen(){
if (iedom){
afb=document.getElementById? document.getElementById("test2") : document.all.test2
afb2=document.getElementById? document.getElementById("test3") : document.all.test3
afb.innerHTML=afb2.innerHTML=afbeelding
huidige_breedte=document.all? afb.offsetWidth : document.getElementById("temp").offsetWidth
afb2.style.left=huidige_breedte+4
}
else if (document.layers){
ns_slide=document.netscape.document.netscape2
ns_slide2=document.netscape.document.netscape3
ns_slide.document.write(afbeelding)
ns_slide.document.close()
huidige_breedte=ns_slide.document.width
ns_slide2.left=huidige_breedte+4
ns_slide2.document.write(afbeelding)
ns_slide2.document.close()
}
lefttime=setInterval("schuiflinks()",30)
}
window.onload=opvullen

function schuiflinks(){
if (iedom){
if (parseInt(afb.style.left)>(huidige_breedte*(-1)+8))
afb.style.left=parseInt(afb.style.left)-kopieersnelheid
else
afb.style.left=parseInt(afb2.style.left)+huidige_breedte+4

if (parseInt(afb2.style.left)>(huidige_breedte*(-1)+8))
afb2.style.left=parseInt(afb2.style.left)-kopieersnelheid
else
afb2.style.left=parseInt(afb.style.left)+huidige_breedte+4

}
else if (document.layers){
if (ns_slide.left>(huidige_breedte*(-1)+8))
ns_slide.left-=kopieersnelheid
else
ns_slide.left=ns_slide2.left+huidige_breedte+4

if (ns_slide2.left>(huidige_breedte*(-1)+8))
ns_slide2.left-=kopieersnelheid
else
ns_slide2.left=ns_slide.left+huidige_breedte+4
}
}

if (iedom||document.layers){
with (document){
document.write('<table border="0" cellspacing="0" cellpadding="0"><td>')
if (iedom){
write('<div style="position:relative;width:'+breedte+';height:'+hoogte+';overflow:hidden">')
write('<div style="position:absolute;width:'+breedte+';height:'+hoogte+';background-color:'+agrondkleur+'" onMouseover="kopieersnelheid=0" onMouseout="kopieersnelheid=snelheid">')
write('<div id="test2" style="position:absolute;left:0;top:0"></div>')
write('<div id="test3" style="position:absolute;left:-1000;top:0"></div>')
write('</div></div>')
}
else if (document.layers){
write('<ilayer width='+breedte+' height='+hoogte+' name="netscape" bgColor='+agrondkleur+'>')
write('<layer name="netscape2" left=0 top=0 onMouseover="kopieersnelheid=0" onMouseout="kopieersnelheid=snelheid"></layer>')
write('<layer name="netscape3" left=0 top=0 onMouseover="kopieersnelheid=0" onMouseout="kopieersnelheid=snelheid"></layer>')
write('</ilayer>')
}
document.write('</td></table>')
}
}
</script>

Ik hoop dat iemand me kan helpen.

grt,

Antwan
 
Laatst bewerkt:
afbeelding[0]='<a href="#"><img src="foto1.jpg" width=150 height=100 border=0></a>'
afbeelding[1]='<a href="#"><img src="foto2.jpg" width=150 height=100 border=0></a>'
afbeelding[2]='<a href="#"><img src="foto3.jpg" width=150 height=100 border=0></a>'
afbeelding[3]='<a href="#"><img src="foto4.jpg" width=150 height=100 border=0></a>'
afbeelding[4]='<a href="#"><img src="foto5.jpg" width=150 height=100 border=0></a>'


je moet je foto's linken, je hebt daar foto1.jpg, typ daar je url naar je image !!
 
het wil me niet lukken ik doe dan zeg maar invoegen vanb afbeelding en dan krijg ik de afbeelding niet te zien ik krijg tekst te zien echt raar ik hoop dat iemand mij kan helpen?

grt,

Antwan
 
het wil me niet lukken ik doe dan zeg maar invoegen vanb afbeelding en dan krijg ik de afbeelding niet te zien ik krijg tekst te zien echt raar ik hoop dat iemand mij kan helpen?

grt,

Antwan

Werkt perfect.
Je aangedragen code in een pagina geplakt,
foto1.jpg etc door mijn eigen plaatjes vervangen: doet het.

:cool:
 
heey hoe heb je dat gedaan dan? mij lukt het niet:confused: ik krijg de heletijd alleen maar tekst

zet jij de afbeeding op internet ofzo?
 
Laatst bewerkt:
Dit soort scripts zet ik altijd in en eigen pagina.
Makkelijk om later voor iets te gebruiken.
Op mijn comp heb ik een map html_test
waar deze files inzitten.

Ik geef je hierbij de door mij grbuikte code.
Kopieer de code en plak die in je editor.
Save en vervang dan de door mij gebruikte plaatjes door die van jezelf.

PHP:
 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
     "http://www.w3.org/TR/1999/REC-html401-19991224/loose.dtd">
<html>
<head>
<title>(Type a title for your page here)</title>
<meta name="GENERATOR" content="Arachnophilia 4.0">
<meta name="FORMATTER" content="Arachnophilia 4.0">
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<META name="description" content=" ">
<META name="keywords" content="  ">
<meta name="Author" content="Peter Vazed">
<META name="robots" content="index, follow">
<META name="revisit" content="7 days">
<meta http-equiv="Content-Style-Type" content="text/css">
<style type="text/css" media="all">
 @import url("zp.css"); 
</style>

<style type="text/css">

      BODY {
       margin: 0px 0px 0px 0px;
       font-family: verdana, arial, helvetica;
       background-image: url(layout/sfeerstrook/site_home.jpg);
       background-repeat: no-repeat;      
       font-size: 14px;
       font-color: #000000;
       color: #000066;
}
.info{
border: dotted 3px #000000;
padding:10px;
}
       </style>
</head>

<body bgcolor="#ffffff" text="#000000" link="#0000ff" vlink="#800080" alink="#ff0000">


<script language="JavaScript1.2">
//Instellen van het veld:
var breedte=300
var hoogte=105
var snelheid=1
agrondkleur="#FFFFFF"
//Invoegen van de afbeeldingen met eventuele hyperlinks:
var afbeelding=new Array()
afbeelding[0]='<a href="#"><img src="vdkaatje/fototest/vw-t4-wit-achter_kl.jpg" width=150 height=100 border=0></a>'
afbeelding[1]='<a href="#"><img src="vdkaatje/fototest/vw-t4-wit_kl.jpg" width=150 height=100 border=0></a>'
afbeelding[2]='<a href="#"><img src="vdkaatje/fototest/vw-t4-wit-voor_kl.jpg" width=150 height=100 border=0></a>'
afbeelding[3]='<a href="#"><img src="vdkaatje/fototest/vw-t4-wit-zijkant_kl.jpg" width=150 height=100 border=0></a>'
afbeelding[4]='<a href="#"><img src="vdkaatje/fototest/vw-t4-wit-zijkant_kl.jpg" width=150 height=100 border=0></a>'

//Hieronder niets wijzigen
var kopieersnelheid=snelheid
afbeelding='<nobr>'+afbeelding.join(" ")+'</nobr>'
var iedom=document.all||document.getElementById
if (iedom)
document.write('<span id="temp" style="visibility:hidden;position:absolute;top:-100;left:-3000">'+afbeelding+'</span>')
var huidige_breedte=''

function opvullen(){
if (iedom){
afb=document.getElementById? document.getElementById("test2") : document.all.test2
afb2=document.getElementById? document.getElementById("test3") : document.all.test3
afb.innerHTML=afb2.innerHTML=afbeelding
huidige_breedte=document.all? afb.offsetWidth : document.getElementById("temp").offsetWidth
afb2.style.left=huidige_breedte+4
}
else if (document.layers){
ns_slide=document.netscape.document.netscape2
ns_slide2=document.netscape.document.netscape3
ns_slide.document.write(afbeelding)
ns_slide.document.close()
huidige_breedte=ns_slide.document.width
ns_slide2.left=huidige_breedte+4
ns_slide2.document.write(afbeelding)
ns_slide2.document.close()
}
lefttime=setInterval("schuiflinks()",30)
}
window.onload=opvullen

function schuiflinks(){
if (iedom){
if (parseInt(afb.style.left)>(huidige_breedte*(-1)+8))
afb.style.left=parseInt(afb.style.left)-kopieersnelheid
else
afb.style.left=parseInt(afb2.style.left)+huidige_breedte+4

if (parseInt(afb2.style.left)>(huidige_breedte*(-1)+8))
afb2.style.left=parseInt(afb2.style.left)-kopieersnelheid
else
afb2.style.left=parseInt(afb.style.left)+huidige_breedte+4

}
else if (document.layers){
if (ns_slide.left>(huidige_breedte*(-1)+8))
ns_slide.left-=kopieersnelheid
else
ns_slide.left=ns_slide2.left+huidige_breedte+4

if (ns_slide2.left>(huidige_breedte*(-1)+8))
ns_slide2.left-=kopieersnelheid
else
ns_slide2.left=ns_slide.left+huidige_breedte+4
}
}

if (iedom||document.layers){
with (document){
document.write('<table border="0" cellspacing="0" cellpadding="0"><td>')
if (iedom){
write('<div style="position:relative;width:'+breedte+';height:'+hoogte+';overflow:hidden">')
write('<div style="position:absolute;width:'+breedte+';height:'+hoogte+';background-color:'+agrondkleur+'" onMouseover="kopieersnelheid=0" onMouseout="kopieersnelheid=snelheid">')
write('<div id="test2" style="position:absolute;left:0;top:0"></div>')
write('<div id="test3" style="position:absolute;left:-1000;top:0"></div>')
write('</div></div>')
}
else if (document.layers){
write('<ilayer width='+breedte+' height='+hoogte+' name="netscape" bgColor='+agrondkleur+'>')
write('<layer name="netscape2" left=0 top=0 onMouseover="kopieersnelheid=0" onMouseout="kopieersnelheid=snelheid"></layer>')
write('<layer name="netscape3" left=0 top=0 onMouseover="kopieersnelheid=0" onMouseout="kopieersnelheid=snelheid"></layer>')
write('</ilayer>')
}
document.write('</td></table>')
}
}
</script>


</body>

</html>

:cool:
 
ik snap juist niet hoe ik die plaatjes moet vervangen.. weet wel waar in het javascript.
Ik vervang ze zo: ik klik op invoegen afbeelding en dan bestand en dan voeg ik hem in bij de code.

maar ik krijg dan het plaatje niet te zien.

hopelijk kan iemand mij helpen?:confused:
 
je moet gewoon, stel dat je een fotootje hebt op je bureaublad dat javascript.jpg heet

dan moet je :

C:\Desktop\javascript.jpg invoegen
 
gedaan maar dan krijg ik het zo:

verkeerdsr6.png


echt raar
 
bij de height en de width moet je "" gebruiken : BV width = "500" height ="600"

en je foto, normaal moet het lukken !
 
heb ik nou ook ingesteld maar lukt nog niet. snap niet wat ik verkeerd doe.
krijg het weer het zelfde te zien als net.

nu is de code van de afbeelding zeg maar zo:

PHP:
afbeelding[0]='<a href="#"><img src="<img src="file:///C:/Documents%20and%20Settings/Antwan%20Prins/Bureaublad/xbox.jpg">" width="500" height="600" border=0></a>'
 
Je had twee keer <img src=" achter elkaar. :)

Probeer dit eerst eens:
PHP:
afbeelding[0] = '<img src="file:///C:/Documents%20and%20Settings/Antwan%20Prins/Bureaublad/xbox.jpg">';
dus alleen '<img src="pad/naam.ext">'

Dan zou het script het moeten doen. :)


Vr.Gr. Egel.
 
hey script werkt nu krijg het plaatje te zien:)

alleen er zit nog tekst achter het plaatje hoe krijg ik dat weg?

en hoe krijg je die blauwe rand om het plaatje weg?

hieronder het plaatje:

plaatjebijnagoedwa1.png
 
die blauwe rand wil zeggen dat het een link omvat, dus bij link, mag je niets hebben
 
Ik was border="0" vergeten, daardoor kwam de blauwe rand (en een link idd).

Ik denk dat de tekst van een volgend plaatje is, als je dit lijstje gebruikt:
PHP:
afbeelding[0] = '<img src="" border="0">';
afbeelding[1] = '<img src="" border="0">';
afbeelding[2] = '<img src="" border="0">';
afbeelding[3] = '<img src="" border="0">';
afbeelding[4] = '<img src="" border="0">';
enz. komt 't goed, alleen nog de adressen van de plaatjes invullen tussen de twee " bij src="" :)


Vr.Gr. Egel.
 
Laatst bewerkt:
ok :) graag gdn :thumb:

zet wel de vraag nog op : "opgelost", rechts onder ;)
 
Laatst bewerkt:
krijg alleen nu die tekst niet weg achter dat plaatje haha het lukt bijna moet er misschien iets tussne gezet worden?
 
Post even het hele javascript dat je nu gebruikt, zoals in het 1e bericht:
PHP:
<script language="JavaScript1.2">
 ........
</script>
Dan is (waarschijnlijk) te zien waar het fout gaat. :)


Vr.Gr. Egel.
 
heey het script is nu zo:

HTML:
body><script language="JavaScript1.2"> 
//Instellen van het veld: 
var breedte=300 
var hoogte=105 
var snelheid=1 
agrondkleur="#FFFFFF" 
//Invoegen van de afbeeldingen met eventuele hyperlinks: 
var afbeelding=new Array() 
afbeelding[0]='<a href="#"><img src="file:///C:/Documents%20and%20Settings/Antwan%20Prins/Bureaublad/xbox.jpg">" width=150 height=100 border=0></a>' 
afbeelding[1]='<a href="#"><img src="file:///C:/Documents%20and%20Settings/Antwan%20Prins/Bureaublad/koe.jpg">" width=150 height=100 border=0></a>' 
afbeelding[2]='<a href="#"><img src="file:///C:/Documents%20and%20Settings/Antwan%20Prins/Bureaublad/leeuw.jpg">" width=150 height=100 border=0></a>' 
afbeelding[3]='<a href="#"><img src="file:///C:/Documents%20and%20Settings/Antwan%20Prins/Bureaublad/draak.jpg">" width=150 height=100 border=0></a>' 
afbeelding[4]='<a href="#"><img src="file:///C:/Documents%20and%20Settings/Antwan%20Prins/Bureaublad/finding%20nemo%202.jpg">" width=150 height=100 border=0></a>' 

//Hieronder niets wijzigen 
var kopieersnelheid=snelheid 
afbeelding='<nobr>'+afbeelding.join(" ")+'</nobr>' 
var iedom=document.all||document.getElementById 
if (iedom) 
document.write('<span id="temp" style="visibility:hidden;position:absolute;top:-100;left:-3000">'+afbeelding+'</span>') 
var huidige_breedte='' 

function opvullen(){ 
if (iedom){ 
afb=document.getElementById? document.getElementById("test2") : document.all.test2 
afb2=document.getElementById? document.getElementById("test3") : document.all.test3 
afb.innerHTML=afb2.innerHTML=afbeelding 
huidige_breedte=document.all? afb.offsetWidth : document.getElementById("temp").offsetWidth 
afb2.style.left=huidige_breedte+4 
} 
else if (document.layers){ 
ns_slide=document.netscape.document.netscape2 
ns_slide2=document.netscape.document.netscape3 
ns_slide.document.write(afbeelding) 
ns_slide.document.close() 
huidige_breedte=ns_slide.document.width 
ns_slide2.left=huidige_breedte+4 
ns_slide2.document.write(afbeelding) 
ns_slide2.document.close() 
} 
lefttime=setInterval("schuiflinks()",30) 
} 
window.onload=opvullen 

function schuiflinks(){ 
if (iedom){ 
if (parseInt(afb.style.left)>(huidige_breedte*(-1)+8)) 
afb.style.left=parseInt(afb.style.left)-kopieersnelheid 
else 
afb.style.left=parseInt(afb2.style.left)+huidige_breedte+4 

if (parseInt(afb2.style.left)>(huidige_breedte*(-1)+8)) 
afb2.style.left=parseInt(afb2.style.left)-kopieersnelheid 
else 
afb2.style.left=parseInt(afb.style.left)+huidige_breedte+4 

} 
else if (document.layers){ 
if (ns_slide.left>(huidige_breedte*(-1)+8)) 
ns_slide.left-=kopieersnelheid 
else 
ns_slide.left=ns_slide2.left+huidige_breedte+4 

if (ns_slide2.left>(huidige_breedte*(-1)+8)) 
ns_slide2.left-=kopieersnelheid 
else 
ns_slide2.left=ns_slide.left+huidige_breedte+4 
} 
} 

if (iedom||document.layers){ 
with (document){ 
document.write('<table border="0" cellspacing="0" cellpadding="0"><td>') 
if (iedom){ 
write('<div style="position:relative;width:'+breedte+';height:'+hoogte+';overflow:hidden">') 
write('<div style="position:absolute;width:'+breedte+';height:'+hoogte+';background-color:'+agrondkleur+'" onMouseover="kopieersnelheid=0" onMouseout="kopieersnelheid=snelheid">') 
write('<div id="test2" style="position:absolute;left:0;top:0"></div>') 
write('<div id="test3" style="position:absolute;left:-1000;top:0"></div>') 
write('</div></div>') 
} 
else if (document.layers){ 
write('<ilayer width='+breedte+' height='+hoogte+' name="netscape" bgColor='+agrondkleur+'>') 
write('<layer name="netscape2" left=0 top=0 onMouseover="kopieersnelheid=0" onMouseout="kopieersnelheid=snelheid"></layer>') 
write('<layer name="netscape3" left=0 top=0 onMouseover="kopieersnelheid=0" onMouseout="kopieersnelheid=snelheid"></layer>') 
write('</ilayer>') 
} 
document.write('</td></table>') 
} 
} 
</script>


ik hoop dat je het kunt vinden:)
 
Laatst bewerkt:
HTML:
<body><script language="JavaScript1.2"> 
//Instellen van het veld: 
var breedte=300 
var hoogte=105 
var snelheid=1 
agrondkleur="#FFFFFF" 
//Invoegen van de afbeeldingen met eventuele hyperlinks: 
var afbeelding=new Array() 
afbeelding[0]='<a href="#"><img src="file:///C:/Documents%20and%20Settings/Antwan%20Prins/Bureaublad/xbox.jpg" width=150 height=100 border=0></a>' 
afbeelding[1]='<a href="#"><img src="file:///C:/Documents%20and%20Settings/Antwan%20Prins/Bureaublad/koe.jpg" width=150 height=100 border=0></a>' 
afbeelding[2]='<a href="#"><img src="file:///C:/Documents%20and%20Settings/Antwan%20Prins/Bureaublad/leeuw.jpg" width=150 height=100 border=0></a>' 
afbeelding[3]='<a href="#"><img src="file:///C:/Documents%20and%20Settings/Antwan%20Prins/Bureaublad/draak.jpg" width=150 height=100 border=0></a>' 
afbeelding[4]='<a href="#"><img src="file:///C:/Documents%20and%20Settings/Antwan%20Prins/Bureaublad/finding%20nemo%202.jpg" width=150 height=100 border=0></a>' 

//Hieronder niets wijzigen 
var kopieersnelheid=snelheid 
afbeelding='<nobr>'+afbeelding.join(" ")+'</nobr>' 
var iedom=document.all||document.getElementById 
if (iedom) 
document.write('<span id="temp" style="visibility:hidden;position:absolute;top:-100;left:-3000">'+afbeelding+'</span>') 
var huidige_breedte='' 

function opvullen(){ 
if (iedom){ 
afb=document.getElementById? document.getElementById("test2") : document.all.test2 
afb2=document.getElementById? document.getElementById("test3") : document.all.test3 
afb.innerHTML=afb2.innerHTML=afbeelding 
huidige_breedte=document.all? afb.offsetWidth : document.getElementById("temp").offsetWidth 
afb2.style.left=huidige_breedte+4 
} 
else if (document.layers){ 
ns_slide=document.netscape.document.netscape2 
ns_slide2=document.netscape.document.netscape3 
ns_slide.document.write(afbeelding) 
ns_slide.document.close() 
huidige_breedte=ns_slide.document.width 
ns_slide2.left=huidige_breedte+4 
ns_slide2.document.write(afbeelding) 
ns_slide2.document.close() 
} 
lefttime=setInterval("schuiflinks()",30) 
} 
window.onload=opvullen 

function schuiflinks(){ 
if (iedom){ 
if (parseInt(afb.style.left)>(huidige_breedte*(-1)+8)) 
afb.style.left=parseInt(afb.style.left)-kopieersnelheid 
else 
afb.style.left=parseInt(afb2.style.left)+huidige_breedte+4 

if (parseInt(afb2.style.left)>(huidige_breedte*(-1)+8)) 
afb2.style.left=parseInt(afb2.style.left)-kopieersnelheid 
else 
afb2.style.left=parseInt(afb.style.left)+huidige_breedte+4 

} 
else if (document.layers){ 
if (ns_slide.left>(huidige_breedte*(-1)+8)) 
ns_slide.left-=kopieersnelheid 
else 
ns_slide.left=ns_slide2.left+huidige_breedte+4 

if (ns_slide2.left>(huidige_breedte*(-1)+8)) 
ns_slide2.left-=kopieersnelheid 
else 
ns_slide2.left=ns_slide.left+huidige_breedte+4 
} 
} 

if (iedom||document.layers){ 
with (document){ 
document.write('<table border="0" cellspacing="0" cellpadding="0"><td>') 
if (iedom){ 
write('<div style="position:relative;width:'+breedte+';height:'+hoogte+';overflow:hidden">') 
write('<div style="position:absolute;width:'+breedte+';height:'+hoogte+';background-color:'+agrondkleur+'" onMouseover="kopieersnelheid=0" onMouseout="kopieersnelheid=snelheid">') 
write('<div id="test2" style="position:absolute;left:0;top:0"></div>') 
write('<div id="test3" style="position:absolute;left:-1000;top:0"></div>') 
write('</div></div>') 
} 
else if (document.layers){ 
write('<ilayer width='+breedte+' height='+hoogte+' name="netscape" bgColor='+agrondkleur+'>') 
write('<layer name="netscape2" left=0 top=0 onMouseover="kopieersnelheid=0" onMouseout="kopieersnelheid=snelheid"></layer>') 
write('<layer name="netscape3" left=0 top=0 onMouseover="kopieersnelheid=0" onMouseout="kopieersnelheid=snelheid"></layer>') 
write('</ilayer>') 
} 
document.write('</td></table>') 
} 
} 
</script>
 
Status
Niet open voor verdere reacties.
Terug
Bovenaan Onderaan