Mit Javscript wäre alles einfacher (?)

[Enrico]

Hallo,

ich habe folgende Nevigationsleiste:

++
                                          ++
                                          ++
+----------+ +------+ +-------+ +-----+  +  +  +-----------+
|Startseite| |Verein| |Kontakt| |Links|  +  +  |Rechtliches|
+----------+ +------+ +-------+ +-----+   ++   +-----------+

Die "Keule" soll hierbei eine Glühbirne darstellen.

Ich möchte nun über eine reine css-Lösung erreichen, dass bei MouseOver, also "hover", über einen der Menüpunkte die Grafik der Glühbirne gewechselt wird:

MouseOver: Glühbirne an
MouseOut:  Glühbirne aus

Nachfolgender Code liegt dem Konstrukt zugrunde:

---
   CSS
   ---

div#Startseite
      {
         background: url(../Grafiken/Schaltflaechen/_startseite_out.png) no-repeat;
         height:     18px;
         position:   absolute;
         left:       0px;
         top:        65px;
         width:      101px;
         z-index:    30;
      }

div#Verein
      {
         background: url(../Grafiken/Schaltflaechen/_verein_out.png) no-repeat;
         height:     17px;
         left:       114px;
         ...
      }

...

----
   html
   ----

<a href=""><div id="Startseite"></div></a>
      <a href=""><div id="Verein"></div></a>
      ...

Bitte nicht an den Identifikationsnamen etc. "stoßen", diese sind derzeit nur zu Testzwecken so gewählt.

Mein Problem ist nun, dass ich den gewünschten Effekt nicht umgesetzt bekomme.

Ich kann beim hover-Ereignis über die Glühbirne die Hintergrundgrafik ändern und habe auch schon versucht, einen span-Bereich für jeden Link zu definieren, der im Grund genommen jedesmal die gleiche Grafik ("Glühbirne aus") mit entsprechender Ausrichtung enthält, aber das kann sicherlich nicht im Sinne des Erfinders sein, Zumal hier die Breite der Glühbirne entweder abgeschnitten ist oder die Links sich auf die Breite der Glühbirne ausdehnen.

Dies bedeutet, dass ich den div für die Glühbirne auslagern und als eigenständigen div darstellen muss und deshalb hier keine Beziehungen über Selektoren aufbauen kann, weilkeine direkten Beziehungen bestehen.

Wie muss ich vorgehen?

Mittels Javascript wäre es wesentlich (?) einfacher (?), da ich dann lediglich OnMouseOver und OnMouseOut einbauen müsste, der Effekt aber nicht sichtbar wäre, wenn jemand die Unterstützung von Javascript ausgeschaltet hat.

Vielen Dank für eure Hilfe.

Gruß
Enrico