[Javascript] Mouse over effect doet het niet

[Zerora]

IK ben bezig aan mijn website. Nu dacht ik laat ik er maar eens een mouse-over effect op de knoppen zetten. Leek mij wel mooi.

Nu heb ik de volgende mouse-over script(origineel van internet geplukt):

code:

In de head:
-----------
<script language="Javascript">
<!--

if (document.images) {
     button1 = new Image
     button2 = new Image

     button1.src = 'img1.gif'
     button2.src = 'img2.gif'
 }
//-->
</script>


In de body:
-----------
<a href="http://java-scripts.net" onmouseover="document.rollover.src=button2.src"
 onmouseout="document.rollover.src=button1.src">[img]"img1.gif"
[/img]</a>

Ik heb vervolgens het script veranderd en mijn images toegevoegd. Deze staan in een mapje "buttons".
Zo is het script op mijn website:

code:

In de head:
-----------
<script language="Javascript">
<!--
if (document.images) {
     button1 = new Image
     button2 = new Image

     button1.src = 'buttons\MAIN_home_off.gif'
     button2.src = 'buttons\MAIN_home_on.gif'
 }
 
 if (document.images) {
     button3 = new Image
     button4 = new Image

     button3.src = 'buttons\MAIN_news_off.gif'
     button4.src = 'buttons\MAIN_news_on.gif'
 }
 
if (document.images) {
     button5 = new Image
     button6 = new Image

     button5.src = 'buttons\MAIN_coming_off.gif'
     button6.src = 'buttons\MAIN_coming_on.gif'
 }

if (document.images) {
     button7 = new Image
     button8 = new Image

     button7.src = 'buttons\MAIN_contact_off.gif'
     button8.src = 'buttons\MAIN_contact_on.gif'
 }

//-->
</script>

In de body:
-----------

        <a href="index.htm" onmouseover="document.rollover.src=button2.src"
 onmouseout="document.rollover.src=button1.src">
[img]"buttons\MAIN_home_off.gif"[/img]</a>
 
 <a href="index.htm" onmouseover="document.rollover.src=button4.src"
 onmouseout="document.rollover.src=button3.src">
[img]"buttons\MAIN_news_off.gif"[/img]</a>

<a href="index.htm" onmouseover="document.rollover.src=button6.src"
 onmouseout="document.rollover.src=button5.src">
[img]"buttons\MAIN_coming_off.gif"[/img]</a>

<a href="index.htm" onmouseover="document.rollover.src=button8.src"
 onmouseout="document.rollover.src=button7.src">
[img]"buttons\MAIN_contact_off.gif"[/img]</a>

Als ik vervolgens mijn website opsla, dan doet ie het niet. De onmouseout-image laat wel zien, maar als ik er mijn muiscursor op houd dan kan het tweede plaatje niet vinden. Als ik daarna muiscursor er weer vanaf haal. Dan kan ie de eerste image ook niet vinden.

Wie kan mij vertellen wat ik fout doe?

[ Voor 26% gewijzigd door Zerora op 16-03-2004 21:06 ]

[sjaakaq]

code:

buttons\MAIN_home_off.gif

Erm... die \ vervangen door een / misschien?? (En dat bij alle \'en.

[ Voor 12% gewijzigd door sjaakaq op 16-03-2004 21:11 ]

[crisp]

je name is niet uniek, maar ook redelijk onnodig in deze context:

HTML:

<a href="index.htm">
<img src="buttons/MAIN_home_off.gif" border="0"
  onmouseover="this.src=button2.src"
  onmouseout="this.src=button1.src"></a>

en inderdaad; internet is geen filesystem.

[ Voor 52% gewijzigd door crisp op 16-03-2004 21:12 ]

[ajvdvegt]

Ten eerste staan al je slashes fout, je hoort '/' te gebruiken.

En waarom niet

code:

if (document.images) {
     button1 = new Image
     button2 = new Image
     button3 = new Image
     button4 = new Image

     button1.src = 'buttons/MAIN_home_off.gif'
     button2.src = 'buttons/MAIN_home_off.gif'
     button3.src = 'buttons/MAIN_news_on.gif'
     button4.src = 'buttons/MAIN_news_on.gif'
...
}

Dat maakt het wat overzichtelijker.

En je hebt 4 dingen met dezelfde naam ('rollover'), dat lijkt me niet handig. Als jealleen de bovenste laat staan, werkt 't dan wel?
En wat is de foutmelding in je JavaScript console? (Geen JavaScript gaan ontwikkelen in IE, in Mozilla is dat veel makkelijker)

[Zerora]

Ik snap hem niet, crisp. Welke naam is niet uniek?

[crisp]

Zerora schreef op 16 maart 2004 @ 21:13:
Ik snap hem niet, crisp. Welke naam is niet uniek?

alle 4 je images hebben nu name="rollover" - hoe weet je script nou welke daarvan hij moet hebben?

Dit is natuurlijk nogal een beginnersvraag; ik raad je dan ook aan eens een javascript tutorial op te zoeken als je hier meer mee wilt gaan doen.

[ Voor 52% gewijzigd door crisp op 16-03-2004 21:14 ]