Hintergrundfarbe in Boxen faden?

[Konsumkind]

Hallo zusammen,
ich habe vor kurzem angefangen mir eine kleine Webseite zusammenzustellen und nutze jetzt zum ersten mal auch "ernsthaft" CSS. Nun stehe ich aber vor folgendem Problem: Ich habe die Navigation so aufgebaut dass sich ein Text in einer Div-Box befindet. Fährt man mit dem Mauszeiger über diese ändert sich die Hintergrundfarbe (per Klasse vorgegeben). Soweit ist das alles auch kein Problem. Was ich aber gerne machen würde wäre dass sich die Hintegrundfarbe der Box beim Hovern durch einen hübschen Fade-Effekt ändert - wenn möglich so dass es auch in FF funktioniert.

Ich finde zwar jede Menge zu Text-Links derren Farbe sich (auch in FF) durch faden ändert aber leider nichts dazu wie man die Hintegrundfarbe auf diesem Weg ändert. Ich habe mir zwar schon überlegt das mit Gifs zu lösen - allerdings wäre es mir lieber das mit etwas Code zu lösen.

Wäre nett wenn mir da jemand weiter helfen könnte.
Danke schonmal :-)

[jayjay]

dann ersetze die hintergrundfarbe durch bild

a.menu {
background:url(image_a.gif) no-repeat left top;
}
a.menu:hover {
background:url(image_b.gif) no-repeat left top;
}

[Konsumkind]

Ja das war eben das was ich als zweite Lösung hatte - ist also nicht code-technisch machbar?

[rewboss]

Mit reinem CSS und HTML ist das nicht realisierbar. Nur mit JavaScript.

[Konsumkind]

Ja das würde mir ja schon reichen. Mir ist wäre es eben recht wenn man das sowohl IE als auch FF (notfalls nur FF) tauglich hinbekommen könnte ohne auf GIFs zu setzen. GIFs habe ich in der Zwischenzeit ausprobiert, aber so richtig glücklich bin ich damit nicht...

[marc22]

Mit Javascript soll das gehen?

[Corsachriz]

Meinst du so etwa in der Art ?

http://demos.mootools.net/Fx.Styles

JavaScript und HTML lässt sich dazu oben Rechts anschauen, kopieren und dann kannst du alles nach deinen Wünschen anpassen.

Chriz

[Malleus]

Ich hab' da auch mal irgendetwas gebastelt. Vieleicht kannst Du das ja auch gebrauchen?


FadeMenu

Tschau

frank

[Konsumkind]

Oha dankeschön. Habe jetzt einfach mal das Skript von dir genommen, Malleus. Allerdings habe ich da ein kleines Problem:
Wenn ich zum ersten mal mit der Maus über die Box fahre ändert die Funktion newColor die Hintergrundfarbe wie gewünscht auf hellgrau und beim verlassen wird auch korrekt zurückgefadet. Wenn ich dann aber zum 2ten mal über die Box fahre bleibt der Hintergrund unverändert dunkelgrau aber beim verlassen wird wieder von hell zu dunkelgrau gefadet. Hast evtl eine Idee woran das liegen könnte?

Ich habe mir den Quellcode deiner Seite zwar angeschaut, kann aber keinen wirklichen Unterschied feststellen.

Trotzdem vielen Dank für das Skript.

[Malleus]

Das ganze müßte ich mir schon genauer anschauen. Mein Script läuft aber bei Dir, oder?

Das Script hab' ich irgendwann mal als Test gescriptet, wollte mal sehen, ob ich's hinbekomme. Es war nie im Einsatz. Vielleicht hat's ja auch noch einen Fehler.

[Konsumkind]

Ja funktioniert, jetzt tadellos, war mein Fehler, den ich jetzt mit etwas rumprobieren hinbekommen habe - wobei ich jetzt nicht genau sagen kann wie :-D Trotzdem vielen Dank nochmal!