Tabellenhintergrundfarbe bei Mouseover über einen Link ändern

[darthi]

Hi Leutz!

Ich hab folgendes Problem.
Ich habe eine Tabelle in der mehrere verschiedene Links sind. Und ich möchte, dass sich die Tabellenhintergrundfarbe ändert sobald ein Mouseover über einen Link ist und zwar bei jeden Link eine andere Farbe.
Das muss eigentlich möglich sein, nur ich finde niergends was zu dem Thema.
Nur wir man den Hintergrund einer Tabelle ändern wenn man bei ihr einen Mouseover ausführt, aber nichts zu Links...

Wäre super, wenn ihr mir helfen könnetet. =)

[Struppi]

Ich habe eine Tabelle in der mehrere verschiedene Links sind. Und ich möchte, dass sich die Tabellenhintergrundfarbe ändert sobald ein Mouseover über einen Link ist und zwar bei jeden Link eine andere Farbe.

Das wird ohne Javascript nicht möglich sein.

Das muss eigentlich möglich sein, nur ich finde niergends was zu dem Thema.
Nur wir man den Hintergrund einer Tabelle ändern wenn man bei ihr einen Mouseover ausführt, aber nichts zu Links...

http://de.selfhtml.org/css/eigenschaften/pseudoformate.htm#link_visited_focus_hover_active

Struppi.

[Cybaer]

Hi,

Nur wir man den Hintergrund einer Tabelle ändern wenn man bei ihr einen Mouseover ausführt, aber nichts zu Links...

Z.B.: onMouseOver="if(this.parentNode) { this.parentNode.style.backgroundColor='red'; }"

Gruß, Cybaer

[Cybaer]

Hi,

Z.B.: onMouseOver="if(this.parentNode) { this.parentNode.style.backgroundColor='red'; }"

Gerade gelesen: Du möchtest ja die Tabelle ändern, nicht die Farbe der Zelle,  in der die links sind. Also so oft .parentNode vor dem style einfügen, bis Du bei der gewünschten Tabelle angekommen bist. ;-)

Ansonsten halt wie üblich: document.getElementById("tableID").style...
oder document.getElementsByTagName("table)[NrDerTabelle].style...

Gruß, Cybaer

[darthi]

Gerade gelesen: Du möchtest ja die Tabelle ändern, nicht die Farbe der Zelle,  in der die links sind. Also so oft .parentNode vor dem style einfügen, bis Du bei der gewünschten Tabelle angekommen bist. ;

Da die Tabelle nur aus einer zelle besteht ist dies auch egal.

[Der Martin]

Hallo,

Da die Tabelle nur aus einer zelle besteht ist dies auch egal.

dann ist aber auch die Tabelle an sich witzlos, und ein anderes blockbildendes Element wäre hier besser geeignet - wenn sich durch die Dokumentstruktur nicht etwas anderes anbietet, auch ein div.

So long,
 Martin

[Ashura]

Hallo darthi.

Ich habe eine Tabelle in der mehrere verschiedene Links sind.

Hm, klingt nach einer http://de.selfhtml.org/html/text/listen.htm@title=Auflistung von Links. Liege ich richtig?

Und ich möchte, dass sich die Tabellenhintergrundfarbe ändert sobald ein Mouseover über einen Link ist und zwar bei jeden Link eine andere Farbe.

Ein „mouseover“ gibt es höchstens in JavaScript, du suchst wohl eher die http://de.selfhtml.org/css/eigenschaften/pseudoformate.htm#link_visited_focus_hover_active@title=:hover-Pseudoklasse in Verbindung mit http://de.selfhtml.org/css/eigenschaften/positionierung.htm#display@title=display:block für die Links, damit sie den gesamten zur Verfügung stehenden Platz einnehmen.

Nur wir man den Hintergrund einer Tabelle ändern wenn man bei ihr einen Mouseover ausführt, aber nichts zu Links...

Das Prinzip ist immer dasselbe.

Weitere Frage: muss das ganze im IE funktionieren? Wenn ja, dann kommst du wohl nicht um eine http://de.selfhtml.org/css/formate/zentrale.htm#klassen@title=Klassengesellschaft (oder ggf. auch IDs) herum, wenn die Links unterschiedliche Farben bekommen sollen.

Einen schönen Mittwoch noch.

Gruß, Ashura

[darthi]

Hallo darthi.

Ich habe eine Tabelle in der mehrere verschiedene Links sind.

Hm, klingt nach einer http://de.selfhtml.org/html/text/listen.htm@title=Auflistung von Links. Liege ich richtig?

Und ich möchte, dass sich die Tabellenhintergrundfarbe ändert sobald ein Mouseover über einen Link ist und zwar bei jeden Link eine andere Farbe.

Ein „mouseover“ gibt es höchstens in JavaScript, du suchst wohl eher die http://de.selfhtml.org/css/eigenschaften/pseudoformate.htm#link_visited_focus_hover_active@title=:hover-Pseudoklasse in Verbindung mit http://de.selfhtml.org/css/eigenschaften/positionierung.htm#display@title=display:block für die Links, damit sie den gesamten zur Verfügung stehenden Platz einnehmen.

Nur wir man den Hintergrund einer Tabelle ändern wenn man bei ihr einen Mouseover ausführt, aber nichts zu Links...

Das Prinzip ist immer dasselbe.

Weitere Frage: muss das ganze im IE funktionieren? Wenn ja, dann kommst du wohl nicht um eine http://de.selfhtml.org/css/formate/zentrale.htm#klassen@title=Klassengesellschaft (oder ggf. auch IDs) herum, wenn die Links unterschiedliche Farben bekommen sollen.

Einen schönen Mittwoch noch.

Gruß, Ashura

Hi!

Also IDs hab ich definiert. Die Tabelle hat einfach die ID "1".
Wegen der Aufzählung liegst du falsch. Die Links liegen alle schön säuberlich in einer Reihe.
Ich nehme auch gerne Javascipt (solange es funktioniert), nur damit kenn ich mich persönlich nicht gut aus.
Ich weiss nur nicht mit welchen Befehl ich die Tabelle ansteuern muss.
Durch die anderen Antworten hab ich "document.getElementById("1").style.bgcolor='FFFFFF'" probiert, jedoch zeigt dies keine Wirkung auf die Tabelle.

[Gunnar Bittersmann]

Hello out there!

Hallo darthi.

[snip]

Gruß, Ashura

Bitte keine Vollzitate.

Also IDs hab ich definiert. Die Tabelle hat einfach die ID "1".

Das darf sie aber nicht. [<http://de.selfhtml.org/html/referenz/attribute.htm#id_idref_name@title=SELFHTML: ID, IDREF oder Name>]

Wegen der Aufzählung liegst du falsch. Die Links liegen alle schön säuberlich in einer Reihe.

Nein, Ashura lag goldrichtig. Ob die Dinger horizontal oder vertikal säuberlich liegen, es ist eine Aufzählung.

Und wie du selbst schreibst, hat die Tabelle nur eine Zelle, ist also keine Tabelle, das table-Element also unsinnig.

"document.getElementById("1").style.bgcolor='FFFFFF'" probiert, jedoch zeigt dies keine Wirkung auf die Tabelle.

Wegen der ungültigen ID auch nicht verwunderlich.

See ya up the road,
Gunnar

[Gunnar Bittersmann]

Hello out there!

Das hat Ingrid glatt noch zweiwas übersehen:

"document.getElementById("1").style.bgcolor='FFFFFF'" probiert, jedoch zeigt dies keine Wirkung auf die Tabelle.

Wegen der ungültigen ID auch nicht verwunderlich.

Und wegen des in CSS nicht vorhandenen 'bgcolor' noch weniger verwunderlich. Und wegen des ungültigen Farbwertes am wenigsten verwunderlich.

Wie die entsprechende CSS-Eigenschaft heißt und wie Farbwerte notiert werden, findest du in <http://de.selfhtml.org/css/eigenschaften/hintergrund.htm@title=SELFHTML: Hintergrundfarben und -bilder>; wie die Eigenschaft in JavaScript notiert wird, findest du in der Beschreibung zum http://de.selfhtml.org/javascript/objekte/style.htm@title=style-Objekt.

See ya up the road,
Gunnar

[Struppi]

Gruß, Ashura

Bitte kein Tofu!

Also IDs hab ich definiert. Die Tabelle hat einfach die ID "1".

ID's dürfen nicht mit einer Zahl beginnen.

Wegen der Aufzählung liegst du falsch. Die Links liegen alle schön säuberlich in einer Reihe.

Das spielt keine Rolle.
Schau dir mal die Beispiele http://css.maxdesign.com.au/ (listamatic 1&2) an.

Struppi.

[Gunnar Bittersmann]

Hello out there!

Bitte kein Tofu!

War doch gar kein TOFU ... eher FOTU. Ansonsten: meine Rede. ;-)

ID's dürfen nicht mit einer Zahl beginnen.

Bitte keine Apostrophitis! Ansonsten: meine Rede. ;-)

Wegen der Aufzählung liegst du falsch. Die Links liegen alle schön säuberlich in einer Reihe.

Das spielt keine Rolle.

Meine Rede. ;-)

See ya up the road,
Gunnar

[Struppi]

...meine Rede. ;-)

..

...meine Rede. ;-)

...

Meine Rede. ;-)

Jaja, ich seh schon, bin heute nicht besonders Aufmerksam, liegt wohl an dem Einfluss einer leichten Grippe.

Struppi.

[Gunnar Bittersmann]

Hello out there!

Jaja, ich seh schon, bin heute nicht besonders Aufmerksam, liegt wohl an dem Einfluss einer leichten Grippe.

Oder auch nur an der Fast-Gleichzeitigkeit unserer Postings (die dir wegen mangelder Aufmerksamkeit infolge einer leichten Grippe entgangen ist?) ;-)

Gute Besserung!

See ya up the road,
Gunnar

[darthi]

Also ich blicke bei euch jetzt nimma durch.
Hab einiges nach euch angepasst...

Das hier ist nun mein Code:
    "<td bgcolor="#FFCC66" id="Auswahl"><div align="center">
      <ul id="nav">
        <li><span class="Stil6"><a href="index.html" onmouseover="document.getElementById("Auswahl").style.backgroundColor='#FFFFFF'">Startseite</a></span></li>
  <li class="Stil6">Kontakt</li>
   <li class="Stil6">Medienzentren</li>
   <li class="Stil6">Veranstaltungen</li>
   <li class="Stil6">Verleih</li>
      </ul>
    </div></td>"

Was ist nun daran falsch

[Ashura]

Hallo darthi.

Das hier ist nun mein Code:
    "<td bgcolor="#FFCC66" id="Auswahl"><div align="center">
      <ul id="nav">
        <li><span class="Stil6"><a href="index.html" onmouseover="document.getElementById("Auswahl").style.backgroundColor='#FFFFFF'">Startseite</a></span></li>
  <li class="Stil6">Kontakt</li>
   <li class="Stil6">Medienzentren</li>
   <li class="Stil6">Veranstaltungen</li>
   <li class="Stil6">Verleih</li>
      </ul>
    </div></td>"

Was ist nun daran falsch

Wie beende ich eine Frage.

Jedenfalls brauchst du im Grunde nur folgendes:

<ul id="nav">  
  <li><a href="index.html">Startseite</a></li>  
  <li>Kontakt</li> <!-- Ich schätze, dass die Verlinkungen hier noch fehlen? -->  
  <li>Medienzentren</li>  
  <li>Verleih</li>  
</ul>

Und auf diese Struktur aufbauend kannst du nun die von dir gewünschten Formatierungen setzen. Dies kannst du im <http://de.selfhtml.org/css/formate/einbinden.htm#zentral@title=zentralen style-Element> tätigen, oder aber--was vorzuziehen ist--in <http://de.selfhtml.org/css/formate/einbinden.htm#separat@title=einer externen Datei>.

Hier legst du nun also fest, dass das a-Element per display als Blockelement dargestellt werden soll (und verpasst ihm ggf. noch eine 100%ige http://de.selfhtml.org/css/eigenschaften/positionierung.htm#width@title=Breite, falls der IE streikt) und legst die von dir gewünschte Veränderung für die besagte :hover-Pseudoklasse fest.

Die ID für das ul-Element kannst du beibehalten, um den Zweck der Auflistung zu kennzeichnen.

Einen schönen Mittwoch noch.

Gruß, Ashura

[darthi]

Also nochmal ein bisschen umgeändert...

http://home.arcor.de/r4mon/test/

Guckt euch die Seite mal an. Irgendwas stimmt da hinten und vorne nicht. Auserdem hab ich immernoch nicht das Problem gelöst, dass sich die Farbe ändert, wenn wann über einen Link geht.
Tut mir Leid, ich bin aber mit HTML nicht so super fit. Also seid etwas langsamer mit mir ;)

[Ashura]

Hallo darthi.

Also nochmal ein bisschen umgeändert...

http://home.arcor.de/r4mon/test/

Guckt euch die Seite mal an. Irgendwas stimmt da hinten und vorne nicht.

Dem stimme ich zu.
Wozu verwendest du hier die Tabelle? Sie ist gänzlich unnötig.

Momentan würden ein h1-Element für den Kopf und besagtes ul-Element für die Navigation genügen.

Auserdem hab ich immernoch nicht das Problem gelöst, dass sich die Farbe ändert, wenn wann über einen Link geht.

Dann solltest du endlich einmal das von mir verlinkte <http://de.selfhtml.org/css/eigenschaften/pseudoformate.htm#link_visited_focus_hover_active@title=Kapitel über die Pseudoklasse :hover> lesen. Dort wird alles erklärt.

Und zur Verschachtelung: beachte auch Gunnars Hinweis.

Einen schönen Mittwoch noch.

Gruß, Ashura

[Gunnar Bittersmann]

Hello out there!

Dann solltest du endlich einmal das von mir verlinkte <http://de.selfhtml.org/css/eigenschaften/pseudoformate.htm#link_visited_focus_hover_active@title=Kapitel über die Pseudoklasse :hover> lesen. Dort wird alles erklärt.

Ich weiß nicht, wie CSS helfen soll, wenn darthi „möchte, dass sich die Tabellenhintergrundfarbe [die Hintergrundfabe der Box der ganzen Liste] ändert sobald ein Mouseover über einen Link ist und zwar bei jeden Link eine andere Farbe.“ [OP]

Mit a:hover (li:hover) kommste nicht an die Eigenschaften von ul ran.

Aber auch möglich, dass darthi gar nicht die Hintergrundfabe der Box der ganzen Liste ändern möchte, sich nur missverständlich ausgedrückt hat.

See ya up the road,
Gunnar

[Ashura]

Hallo Gunnar.

Mit a:hover (li:hover) kommste nicht an die Eigenschaften von ul ran.

Richtig, da wäre ul:hover erforderlich.

Aber auch möglich, dass darthi gar nicht die Hintergrundfabe der Box der ganzen Liste ändern möchte, sich nur missverständlich ausgedrückt hat.

Davon gehe ich momentan noch aus, ja.

Einen schönen Mittwoch noch.

Gruß, Ashura

[Gunnar Bittersmann]

Hello out there!

Mit a:hover (li:hover) kommste nicht an die Eigenschaften von ul ran.
Richtig, da wäre ul:hover erforderlich.

Fällt aber aus wegen „[…] und zwar bei jeden Link eine andere Farbe.“ [OP]

Da wäre JavaScript erforderlich.

Zitiere nicht mehr als nötig. Aber auch nicht weniger. ;-)

See ya up the road,
Gunnar

[Ashura]

Hallo Gunnar.

Mit a:hover (li:hover) kommste nicht an die Eigenschaften von ul ran.
Richtig, da wäre ul:hover erforderlich.

Fällt aber aus wegen „[…] und zwar bei jeden Link eine andere Farbe.“ [OP]

Meh! Ich plädiere dafür, dass folgender Selektor endlich in den Sprachbestand von CSS aufgenommen wird:

ul < a:hover {  
  background:whatever;  
}

Da wäre JavaScript erforderlich.

Ja, sieht so aus.

Einen schönen Mittwoch noch.

Gruß, Ashura

[Gunnar Bittersmann]

Hello out there!

"<td bgcolor="#FFCC66" id="Auswahl"><div align="center">
      <ul id="nav">

Verzichte auf die veralteten HTML-Attribute ('bgcolor', 'align') und mache sämtliche Angaben zur Darstellung mit CSS. (Und zwar nicht in 'style'-Attributen, sondern im zentralen Stylesheet.)

<li><span class="Stil6"><a href="index.html" onmouseover="document.getElementById("Auswahl").style.backgroundColor='#FFFFFF'">Startseite</a></span></li>

Beim Farbwert hattest du es beachtet, bei der ID nicht. Alles klar?

<li class="Stil6">Kontakt</li>
   <li class="Stil6">Medienzentren</li>
   <li class="Stil6">Veranstaltungen</li>
   <li class="Stil6">Verleih</li>

Die Klassifizierung ist sinnlos, wenn sämtliche Items derselben Klasse angehören. In CSS kannst du diese mit dem Nachfahrenselektor ansprechen. [<http://de.selfhtml.org/css/formate/zentrale.htm#verschachtelte_elemente@title=SELFHTML: Formate für verschachtelte HTML-Elemente definieren>]

See ya up the road,
Gunnar

[Gunnar Bittersmann]

Hello out there!

Oops, da hat Ingrid glatt nochwas übersehen:

"<td bgcolor="#FFCC66" id="Auswahl"><div align="center">
      <ul id="nav">

Mit 'ul' hast du bereits ein Element, das du mit CSS formatieren kannst.

Die umschließenden Elemente ('div', 'td', 'tr', 'table') sind damit überflüssig.

See ya up the road,
Gunnar

[Cybaer]

Hi,

Das hier ist nun mein Code:

Neben den erwähnten Anführungszeichen ...

<li><span class="Stil6"><a href="index.html" onmouseover="document.getElementById

... besser für Browser die nicht up-to-date sind klammern:

<li><span class="Stil6"><a href="index.html" onmouseover="if(document.getElementById) { document.getElementById... }"

Sonst ggf. unnötig Aua! ;)

Gruß, Cybaer