document.getElementById zickt

[stiller]

Hallo

wie kann ich die Text-Farbe über 'document.getElementById' verändern?

Habe eine UL/LI Kombination bei der jeder li eine eigene ID hat
z.B.
<li id="abruzzo"><a href="#">Abruzzo</a></li>

über eine ImageMap möchte ich nun dass beim drüberfahren dieser Li-Text rot verfärbt wird:
<area onmouseover="document.getElementById('basilicata').style.color='#F00'" onmouseout=" document.getElementById('basilicata').style.color='#000'" shape="poly" coords="236,257,240,252,249,253,275,279,268,291,244,295,242,291,244,281" href="#"/>

Das List-Style Element wird so beretis eingefärbt, aber der Text nicht.

Hat mir jemand einen Tipp?

Danke vielmals.
Gruss
Thomas

[ChrisB]

Hi,

<li id="abruzzo"><a href="#">Abruzzo</a></li>

über eine ImageMap möchte ich nun dass beim drüberfahren dieser Li-Text rot verfärbt wird:
[code lang=javascript]<area onmouseover="document.getElementById('basilicata').style.color='#F00'"

Das List-Style Element wird so beretis eingefärbt

Das ist erstaunlich, denn schliesslich gibst du eine ganz andere ID an, als du dem LI gegeben hast.

Lese bitte hier nach, wie man Probleme *vernünftig* beschreibt. Dass es "zickt", ist äquivalent zu "funzt nich", und das ist keine Problembeschreibung.

MfG ChrisB

[Felix Riesterer]

Lieber stiller,

die color-Eigenschaft eines <li> ist völlig unerheblich, wenn ein darin befindliches Element durch eine Style-Regel mit höherer Spezifität einen anderen Wert für dieselbe Eigenschaft erhält.

In anderen Worten: Das <a>-Element hat anscheinend mittels des a:link-Selektors einen anderen color-Wert zugewiesen bekommen, sodass Änderungen am color-Wert seines Elternelements keine Auswirkung beim Inhalt des <a>-Elements haben.

Dein JavaScript müsste das style-Object des <a>-Elements ansprechen! Du brauchst wahrscheinlich eher ein document.getElementById('die-richtige-ID-jetzt').getElementsByTagName('a')[0].style.color='#abcdef';. Besser ist es aber, das Vorhandensein der beabsichtigten Objekte in jedem Fall vorher zu prüfen!

Liebe Grüße,

Felix Riesterer.

[Hans Wurst]

Hi,

über eine ImageMap möchte ich nun dass beim drüberfahren dieser Li-Text rot verfärbt wird:

Viel einfacher wäre es mit CSS zu lösen, etwa so:
#abruzzo:hover { color:#FF0000; /* ect. */ }

Desweiteren übeprüfe dein Dokument auf doppelte IDs, das ist meinstens der Grund warum getElementById() "zickt".

[Felix Riesterer]

Lieber Hans,

Viel einfacher wäre es mit CSS zu lösen, etwa so:
#abruzzo:hover { color:#FF0000; /* ect. */ }

nö! (darum)

Desweiteren übeprüfe dein Dokument auf doppelte IDs, das ist meinstens der Grund warum getElementById() "zickt".

Stimmt.

Liebe Grüße,

Felix Riesterer.

[Hans Wurst]

nö! (darum)

Dann eben so:
#abruzzo a:hover { color:#FF0000; /* ect. */ }

Ich weiß ja nicht ob er Styles im Dokument nutzt, und welche CSS Eigenschaften schon garnicht, aber ich setze es meistenst per CSS um, ist einfacher, übersichtlicher und vorallem läufts fast überall, auch ohne JS.

[Felix Riesterer]

Lieber Hans,

Dann eben so:
#abruzzo a:hover { color:#FF0000; /* ect. */ }

schon allein das Default-Stylesheet der Browser enthält a:link, in welchem eine andere Textfarbe definiert wird (das bekannte blau). Ebenso existiert a:visited, mit dem bekannten violett. Deswegen ist das Ändern von color für ein Elternelement eines Hyperlinks ohne Auswirkung auf denselben (egal ob per Stylesheet oder einer dynamischen Zuweisung per JavaScript) - und das liegt an der von mir genannten Spezifität der Rulesets.

Liebe Grüße,

Felix Riesterer.