Probleem met onMouseover

[FotoRob]

onMouseover

Een vraagje over een onmouseover-script:
Ik heb een script om een menu naar links en rechts te laten bewegen (zie deze link).

Is er een mogelijkheid om het plaatje van de pijl (pijllinks en pijlrechts) te laten veranderen als de scroll aan het einde is, dat er dan een andere pijl te zien is?


Hieronder mijn code, alvast bedankt als je iets weet...

<style>body{overflow-x:hidden;overflow-y:scroll;}</style>
<center>
<script language="JavaScript1.2">
var pijllinks='prev.gif'; 
var pijlrechts='next.gif';
var menubreedte=850;
var menuhoogte=150;
var scrollsnelheid=6;

var menuinhoud='<nobr>  <a href="#"><img src="foto/small/DSCF0280.jpg" height="75" border=0></a>  <a href="#"><img src="foto/small/DSCF0283small.jpg" width="100" border=0></a>  <a href="#"><img src="foto/small/DSCF0289.jpg" height="75" border=0></a>  <a href="#"><img src="foto/small/DSCF0296.jpg" height="75" border=0></a>  <a href="#"><img src="foto/small/DSCF0303.jpg" height="75" border=0></a>  <a href="#"><img src="foto/small/DSCF0308.jpg" height="75" border=0></a>  <a href="#"><img src="foto/small/DSCF0310.jpg" height="75" border=0></a>  <a href="#"><img src="foto/small/DSCF0318.jpg" height="75" border=0></a>  <a href="#"><img src="foto/small/DSCF0319.jpg" height="75" border=0></a>  <a href="#"><img src="foto/small/DSCF0327.jpg" height="75" border=0></a>  <a href="#"><img src="foto/small/DSCF0333.jpg" height="75" border=0></a>  <a href="#"><img src="foto/small/DSCF0280.jpg" height="75" border=0></a>  <a href="#"><img src="foto/small/DSCF0334.jpg" height="75" border=0></a>  <a href="#"><img src="foto/small/DSCF0337.jpg" height="75" border=0></a>  <a href="#"><img src="foto/small/DSCF0339.jpg" height="75" border=0></a>  <a href="#"><img src="foto/small/DSCF0343.jpg" height="75" border=0></a>  <a href="#"><img src="foto/small/DSCF0363.jpg" height="75" border=0></a>  <a href="#"><img src="foto/small/DSCF0376.jpg" height="75" border=0></a>  </nobr>'

var explorer=document.all||document.getElementById;
if (explorer)
{document.write('<span id="tijdelijk" style="visibility:hidden;position:absolute;top:-100;left:-1000">'+menuinhoud+'</span>')}
var huidigebreedte='';
var iescroll, nsscroll;
var ingeladen=0;
function opvullen(){
if (explorer){
iescroll=document.getElementById? document.getElementById("test2") : document.all.test2
iescroll.innerHTML=menuinhoud
huidigebreedte=document.all? iescroll.offsetWidth : document.getElementById("tijdelijk").offsetWidth
}
else if (document.layers){
nsscroll=document.nsscrollmenu.document.nsscrollmenu2
nsscroll.document.write(menuinhoud)
nsscroll.document.close()
huidigebreedte=nsscroll.document.width
}
ingeladen=1
}
window.onload=opvullen;

function ganaarlinks(){
if (ingeladen){
if (explorer&&parseInt(iescroll.style.left)>(menubreedte-huidigebreedte)){
iescroll.style.left=parseInt(iescroll.style.left)-scrollsnelheid
}
else if (document.layers&&nsscroll.left>(menubreedte-huidigebreedte))
nsscroll.left-=scrollsnelheid
}
linkstijd=setTimeout("ganaarlinks()",50)
}

function ganaarrechts(){
if (ingeladen){
if (explorer&&parseInt(iescroll.style.left)<0)
iescroll.style.left=parseInt(iescroll.style.left)+scrollsnelheid
else if (document.layers&&nsscroll.left<0)
nsscroll.left+=scrollsnelheid
}
rechtstijd=setTimeout("ganaarrechts()",50)
}
if (explorer||document.layers){
with (document){
write('<table border="0" cellspacing="0" cellpadding="0">')
write('<td valign="middle"><a href=#" onMouseover="ganaarrechts()" onMouseout="clearTimeout(rechtstijd)"><img src="'+pijllinks+'"border=0></a> </td>')
write('<td valign="top">')
if (explorer){
write('<div style="position:relative;width:'+menubreedte+';">')
write('<div style="position:absolute;width:'+menubreedte+';height:'+menuhoogte+';overflow:hidden;">')
write('<div id="test2" style="position:absolute;left:0;top:0">')
write('</div></div></div>')
}
else if (document.layers){
write('<ilayer width='+menubreedte+' height='+menuhoogte+' name="nsscrollmenu">')
write('<layer name="nsscrollmenu2" left=0 top=0></layer></ilayer>')
}
write('</td>')
write('<td valign="middle"> <a href="#" onMouseover="ganaarlinks()" onMouseout="clearTimeout(linkstijd)">')
write('<img src="'+pijlrechts+'"border=0></a>')
write('</td></table>')
}
}
</script>
</center>

 

[keej]

Tis maar een poging. Lijkt mij een oud script van in de tijd van netscape. Ik ben er afgebleven en enkel een paar toevoegingen gedaan die mss het werk doen in moderne browsers (ik ben niet zeker) en in oude browsers het zouden moeten laten zoals het is.

Je moet in dezelfde map nu nog de nieuwe alternatieve figuurtjes prev2.gif en next2.gif plaatsen van precies dezelfde grootte als de andere pijltjes maar die er anders uitzien zoals je wilt als de scroll op het einde is.

(Wel een goeie kans dat er een fout zit in het script, ik heb het wat snel gedaan.)

<style>body{overflow-x:hidden;overflow-y:scroll;}</style>
<center>
<script language="JavaScript1.2">
var pijllinks='prev.gif'; 
var pijlrechts='next.gif';
var pijllinksuit='prev2.gif';
var pijlrechtsuit='next2.gif';
var menubreedte=850;
var menuhoogte=150;
var scrollsnelheid=6;

var menuinhoud='<nobr>  <a href="#"><img src="foto/small/DSCF0280.jpg" height="75" border=0></a>  <a href="#"><img src="foto/small/DSCF0283small.jpg" width="100" border=0></a>  <a href="#"><img src="foto/small/DSCF0289.jpg" height="75" border=0></a>  <a href="#"><img src="foto/small/DSCF0296.jpg" height="75" border=0></a>  <a href="#"><img src="foto/small/DSCF0303.jpg" height="75" border=0></a>  <a href="#"><img src="foto/small/DSCF0308.jpg" height="75" border=0></a>  <a href="#"><img src="foto/small/DSCF0310.jpg" height="75" border=0></a>  <a href="#"><img src="foto/small/DSCF0318.jpg" height="75" border=0></a>  <a href="#"><img src="foto/small/DSCF0319.jpg" height="75" border=0></a>  <a href="#"><img src="foto/small/DSCF0327.jpg" height="75" border=0></a>  <a href="#"><img src="foto/small/DSCF0333.jpg" height="75" border=0></a>  <a href="#"><img src="foto/small/DSCF0280.jpg" height="75" border=0></a>  <a href="#"><img src="foto/small/DSCF0334.jpg" height="75" border=0></a>  <a href="#"><img src="foto/small/DSCF0337.jpg" height="75" border=0></a>  <a href="#"><img src="foto/small/DSCF0339.jpg" height="75" border=0></a>  <a href="#"><img src="foto/small/DSCF0343.jpg" height="75" border=0></a>  <a href="#"><img src="foto/small/DSCF0363.jpg" height="75" border=0></a>  <a href="#"><img src="foto/small/DSCF0376.jpg" height="75" border=0></a>  </nobr>'

var explorer=document.all||document.getElementById;
if (explorer)
{document.write('<span id="tijdelijk" style="visibility:hidden;position:absolute;top:-100;left:-1000">'+menuinhoud+'</span>')}
var huidigebreedte='';
var iescroll, nsscroll;
var ingeladen=0;
function opvullen(){
if (explorer){
iescroll=document.getElementById? document.getElementById("test2") : document.all.test2
iescroll.innerHTML=menuinhoud
huidigebreedte=document.all? iescroll.offsetWidth : document.getElementById("tijdelijk").offsetWidth
}
else if (document.layers){
nsscroll=document.nsscrollmenu.document.nsscrollmenu2
nsscroll.document.write(menuinhoud)
nsscroll.document.close()
huidigebreedte=nsscroll.document.width
}
ingeladen=1
}
window.onload=opvullen;

function ganaarlinks(){
if (ingeladen){
teruglinks();
if (explorer&&parseInt(iescroll.style.left)>(menubreedte-huidigebreedte)){
iescroll.style.left=parseInt(iescroll.style.left)-scrollsnelheid
}
else if (document.layers&&nsscroll.left>(menubreedte-huidigebreedte)){
nsscroll.left-=scrollsnelheid
}
else
veranderrechts();
}
linkstijd=setTimeout("ganaarlinks()",50)
}

function ganaarrechts(){
if (ingeladen){
terugrechts();
if (explorer&&parseInt(iescroll.style.left)<0)
iescroll.style.left=parseInt(iescroll.style.left)+scrollsnelheid
else if (document.layers&&nsscroll.left<0){
nsscroll.left+=scrollsnelheid
}
else
veranderlinks();
}
rechtstijd=setTimeout("ganaarrechts()",50)
}

function veranderlinks(){
if (document.getElementById){
document.getElementById('figlinks').src=pijllinksuit;
}
}

function veranderrechts(){
if (document.getElementById){
document.getElementById('figrechts').src=pijlrechtsuit;
}
}

function teruglinks(){
if (document.getElementById){
document.getElementById('figlinks').src=pijllinks;
}
}

function terugrechts(){
if (document.getElementById){
document.getElementById('figrechts').src=pijlrechts;
}
}

if (explorer||document.layers){
with (document){
write('<table border="0" cellspacing="0" cellpadding="0">')
write('<td valign="middle"><a href=#" onMouseover="ganaarrechts()" onMouseout="clearTimeout(rechtstijd)"><img id="figlinks" src="'+pijllinks+'"border=0></a> </td>')
write('<td valign="top">')
if (explorer){
write('<div style="position:relative;width:'+menubreedte+';">')
write('<div style="position:absolute;width:'+menubreedte+';height:'+menuhoogte+';overflow:hidden;">')
write('<div id="test2" style="position:absolute;left:0;top:0">')
write('</div></div></div>')
}
else if (document.layers){
write('<ilayer width='+menubreedte+' height='+menuhoogte+' name="nsscrollmenu">')
write('<layer name="nsscrollmenu2" left=0 top=0></layer></ilayer>')
}
write('</td>')
write('<td valign="middle"> <a href="#" onMouseover="ganaarlinks()" onMouseout="clearTimeout(linkstijd)">')
write('<img id="figrechts" src="'+pijlrechts+'"border=0></a>')
write('</td></table>')
}
}
</script>
</center>

edit: Controle gedaan, script aan de hand daarvan iets aangepast.

 

[FotoRob]

Bedankt voor de hulp, script lijkt het zo op het eerste oog goed te doen. Ik zie tot nu toe ook nog geen foutmeldingen.

 

[keej]

Ja ik had het dan ook nog even gecontroleerd en het klopt. Ik zei dat het script oud was omdat het rekening hield met een oude Netscape-browser. Ik heb dat in die toevoegingen zelf niet gedaan want niemand gebruikt die nog (maar zelfs in die browser crasht het zoals ik het heb opgebouwd normaalgezien niet, alleen worden de pijltjes dan niet veranderd).

 

[FotoRob]

Dat het oud is kan kloppen, had dit script al heel lang in een map met voorbeeldscripts staan. Als ik iets nodig heb pluk ik het daar dan uit, maar deze was idd al van een aantal jaar geleden...