CSS Mouseover in <ul> funktioniert nicht

[Tom P.]

Hallo liebe Community!

Ich brauche eure Hilfe. Ich fasse mich auch relativ kurz.

Warum geht das nicht? Sehr intelligente Frage, ich weiß.
Es geht darum das ich in einer <ul> navigation (nur mit bildern) versuche einen Mouseover hinzubekommen, was bisher auf allen Seiten die ich gemacht habe einwandfrei funktioniert hat. Nur diesmal nicht, ich habe die vermutung das es an der <ul> liegt, kenne mich aber nicht gut genug aus um andere Fehlerquellen auszuschließen.

Momentan habe ich nur den ersten Link/Bild getestet, er zerreisst nicht und die Darstellung in DW sieht genauso aus wie wenn es funktionieren würde, tut es aber nicht. Habe die Pfade der Bilder überprüft, gecheckt ob es vielleicht die selben Bilder sind sodass sich nichts tut. Fehlanzeige. Es funktioniert alles bis eben auf den Grafiktausch.

Es geht um folgenden Code:

<div id="navicontainer">
<ul style="list-style-type:none">
<li>
<span onMouseOver="document.Bild.src='bilder/start.png'"
         onMouseOut="document.Bild.src='bilder/start2.png'">
<a href="#">
<img src="bilder/start2.png" name="Bild" border="0">
</a>
</span>

</li>
</ul>
</div>

Ich würde mich sehr freuen wenn Ihr mir mit Rat und Tat zur Seite stehen würdet (:

Grüße!

[ChrisB]

Hi,

Warum geht das nicht? Sehr intelligente Frage, ich weiß.

Gut, wenn ein Frager das selber erkennt.

Schlecht, wenn er es dann bei "geht nicht" belässt, und kein Stück weit erklärt, was geht nicht im konkreten Falle bedeutet.

</hilfe/charta.htm#tipps-fuer-fragende>

MfG ChrisB

[Tom P.]

Hi,

Warum geht das nicht? Sehr intelligente Frage, ich weiß.

Gut, wenn ein Frager das selber erkennt.

Schlecht, wenn er es dann bei "geht nicht" belässt, und kein Stück weit erklärt, was geht nicht im konkreten Falle bedeutet.

</hilfe/charta.htm#tipps-fuer-fragende>

MfG ChrisB

Hi ChrisB,

ich habe doch geschrieben das allein der Grafikaustausch nicht funktioniert, Link funktioniert, die Seite zerreißt nicht etc. Nur eben der Grafikaustausch findet nicht statt. Grafikaustausch findet nicht statt, Grafik ändert sicht nicht beim "überfahren" mit der Maus.

Mfg
Tom

[Gunnar Bittersmann]

@@Tom P.:

nuqneH

Warum geht das nicht? Sehr intelligente Frage, ich weiß.

Besonders intelligent daran ist, dass du als Themenbereich CSS gewählt, hast, obwohl von CSS bei dir nichts zu sehen ist. War das intelligent vorausschauend?

Dein JavaScript kannst du entsorgen und die gewünschte Darstellung mit CSS lösen. Dazu das Bild nicht per 'img', sondern als Hintergrundbild der 'a'-Elemente einbinden. Mit 'a:hover' das andere Bild anzeigen, wobei du sinnvollerweise beide Bilder in einer Grafik hast und per 'background-position' umschaltest. (CSS-Sprites)

Qapla'

[Deus Figendi]

Erstmal: Die Kritik ob CSS/JavaScript ist vollkommen berechtigt, das ist kein CSS und man könnte es (problemlos) mit CSS machen.

Es geht um folgenden Code:

<div id="navicontainer">
<ul style="list-style-type:none">
<li>
<span onMouseOver="document.Bild.src='bilder/start.png'"
         onMouseOut="document.Bild.src='bilder/start2.png'">
<a href="#">
<img src="bilder/start2.png" name="Bild" border="0">
</a>
</span>

</li>
</ul>
</div>

Ich kenne mich nur mäßig mir JavaScript aus, aber ich glaube nicht dass "name" und der Zugriff, wie du ihn realisiert hast funktionieren, weil "name" nicht unique ist (wobei JS das dann auch auf ALLE Elemente mit dem Namen anwenden könnte... naja) vermutlich willst du:

<span onMouseOver="document.getElementsByName('Bild')[0].src='bilder/start.png'"  

>          onMouseOut="document.getElementsByName('Bild')[0].src='bilder/start2.png'">

Wobei ich nicht weiß ob man Hochkomma in JS als string-Begrenzer nehmen kann, aber da du das gemacht hast ging ich mal davon aus :) (erspart das Escapen)