onmouseover klappt nicht

[Phil]

Hello out there!

Ich habe eine Navigationsliste:

////////////////////////////////////////////////
<ul id="Navigation">
 <li name="start" class="start1"><a href="#"
     onMouseOver="document.start.class='start1'"
     onMouseOut="document.start.class='start2'">Startseite</a></li>
</ul>
/////////////////////////////////////////////////

Wenn ich über einen Link gehe, hier im Beispiel auf Startseite, dann soll sich die Klasse wechseln inzwar von

.start1 { list-style-image:url(../but/n1.gif) }

auf

.start2 { list-style-image:url(../but/grey.gif) }

Leider klappt das ganze nicht -.-.
Woran liegt das? Der Pfad ist richtig(1000 mal kontrolliert).

mfg

Phil

[Gernot Back]

Hallo Phil,

probier es mal so:

  
<ul id="Navigation">  
   <li class="start2">  
      <a href="#" onMouseOver="[code lang=javascript]  
parentNode.className='start1'
~~~" onMouseOut="`parentNode.className='start2'`{:.language-javascript}">Startseite</a>  
   </li>  
</ul>  
[/code]  
  
Gruß Gernot

[Jan L.]

Hallo,

1. 'class' ist in Javascript ein reserviertes Wort. Wenn du die Klasse eines
   Elements per JS ändern möchtest, mußt du 'className' verwenden.

2. Nur weil du einem Element den Namen 'start' gegeben hast, existiert in JS
   nicht automatisch ein Objekt, das du über 'document.start' ansprechen
   kannst.
   Gib dem <li> eine id namens 'start' und greife dann so darauf zu:

~~~javascript

document.getElementById('start').className = '...';

  
Du könntest das auch ganz ohne JS nur per CSS lösen, indem du nicht  
'list-style-image' verwendest, sondern das Bild als Hintergrundgrafik, die  
sich nicht wiederholt, in den Link einfügst und dem Link ein 'padding-left'  
spendierst. Das Hintergrundbild kannst du dann ja einfach bei einem ':hover'  
austauschen.  
  
Gruß, Jan