kruisjes weergegeven bij javascript

[purgator7890]

Hallo,
Ik ben bezig met een website. Ik wilde daarbij gebruik maken van javascript. Ik heb een beeldwissel voor foto's en een foto album.
Bij beide scripts is hetzelfde probleem. Op de computer geeft ie de foto's goed weer. Als ik het echter online zet krijg ik ipv elke foto overal een kruisje.
Het gaat om o.a het volgende script. In elke browser is het hetzelfde en in firefox geeft ie zelfs niks weer. Kan iemand me helpen hoe dit op te lossen is?

-------------------------------------------------------------------------------------------------------------------
<script language="JavaScript1.2">
[js]
var breedte=300
var hoogte=105
var snelheid=1
agrondkleur="#FFFFFF"



var afbeelding=new Array()
afbeelding[0]='<a href="#"><img src="PICT5037.jpg" width=150 height=100 border=0></a>'
afbeelding[1]='<a href="#"><img src="PICT5052.jpg" width=150 height=100 border=0></a>'
afbeelding[2]='<a href="#"><img src="PICT5059.jpg" width=150 height=100 border=0></a>'
afbeelding[3]='<a href="#"><img src="PICT5092.jpg" width=150 height=100 border=0></a>'
afbeelding[4]='<a href="#"><img src="PICT5116.jpg" width=150 height=100 border=0></a>'


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>')
}
}
[/js]
</script>

 

[Egel]

Het meest voor de hand liggend is niet een javascript probleem, maar hoofdletters / kleine letters.


PICT5037.jpg

Op je computer, met windows, pakt de webpagina het ook als het bestand PICT5037.JPG heet.

Op een website, met linux of unix, moeten alle letters overeenkomen qua hoofd- / kleine letters, anders pakt ie het niet. A en a zijn dan net zo verschillend als A en B.

 

[purgator7890]

Ik heb het net meteen geprobeert, maar ook dat hielp niet. Heb het zelfs met alleen cijfers geprobeerd als naam....
De code staat verder wel in de body van mijn HTML script, weet niet of dit erg is...

 

[Supersnail]

Open deur misschien, maar heb je de plaatjes ook geüpload? Kan je anders eens de link naar de website geven?

Overigens zou ik een ander script zoeken. Het script dat je postte is zo'n 10 jaar oud. Dat is waarschijnlijk ook de reden dat het in Firefox niet werkt.

 

[csshunter]

Al eens geprobeerd:

<img src="PICT5037.jpg" width="150" height="100" border="0">

in de array, in plaats van:

<img src="PICT5037.jpg" width=150 height=100 border=0>

?

 

[Egel]

Probeer het eens met dit script:
[js]<style type="text/css">
.z0 { filter: alpha(opacity=100); -moz-opacity: 1.00; opacity: 1.00;}
.z1 { filter: alpha(opacity= 97); -moz-opacity: 0.97; opacity: 0.97;}
.z2 { filter: alpha(opacity= 88); -moz-opacity: 0.88; opacity: 0.88;}
.z3 { filter: alpha(opacity= 75); -moz-opacity: 0.75; opacity: 0.75;}
.z4 { filter: alpha(opacity= 59); -moz-opacity: 0.59; opacity: 0.59;}
#w1, #w2, #w3 { position: absolute; left: 0px; right: 0px;}
</style>

<div style="position: relative; width: 200px; height: 280px;">
<img id="w1" style="z-index: 1;" src="m1.jpg" />
<img id="w2" style="z-index: 2;" src="m2.jpg" />
<img id="w3" style="z-index: 3;" src="m1.jpg" onmouseover="stopFade()" onmouseout="startFade()" />
</div>

<script type="text/javascript">
// Egel 100601
var fadeImages = ['m1.jpg','m2.jpg','m3.jpg','m4.jpg'];

var timer = 0, fadeCounter = 0, imageCounter = 1;
var w1 = document.getElementById('w1');
var w2 = document.getElementById('w2');
var w3 = document.getElementById('w3');

function getNextImage() {
if (++imageCounter >= fadeImages.length) imageCounter = 0;
return fadeImages[imageCounter];
};

function fade() {
if (++fadeCounter > 8) fadeCounter = 0;
w3.className = 'z' + [0,1,2,3,4,4,3,2,1][fadeCounter];
switch (fadeCounter) {
case 0: w2.src = w1.src; w1.src = w3.src; break;
case 5: w3.src = w2.src; w2.src = w1.src; w1.src = getNextImage(); break;
};
};

function startFade() {
timer = setInterval('fade()',400);
};
startFade();

function stopFade() {
w3.className = 'z0';
clearInterval(timer);
};
</script>[/js]
dat werkt in alle moderne browsers.


Bij:
[js] var fadeImages = ['m1.jpg','m2.jpg','m3.jpg','m4.jpg'];[/js]
vul je dan je plaatjes in, de eerste 2 moet je ook binnen de div gebruiken.

En de width & height van die div moet je aanpassen aan je plaatjes.