Tabellenzelle als Link

[Newbie]

Hallo!

Ich weiß das Thema wurde schon behandelt, allderdings habe ich das Problem in abgewandelter Form:

Ich möchte eine Tabelle mit Links erstellen und der gesamte Zelleninhalt, also auch der Hintergrund soll sich verändern. Allerdings soll sich das nur auf eine bestimmte Tabelle beziehen und nicht global definiert sein. Wie also kann ich das erreichen. Habe keine Ahnung wie ich die CSS Formate nur innerhalb dieses Elementes definiere.

Vielen Dank für Eure Hilfe im Voraus!

Alex

[Uschi Renziehausen]

Gugugg,

Es gibt zwei Lösungen, die beide nicht immer gehen.
Gib deiner Tabelle eine Klasse, z.B. hoverIt
also <table class="hoverIt">

In der CSS würdest du dann etwa folgendes notieren:

table.hoverIt td:hover {background-color: #000000}

Für die meisten Browser, die das nicht können, gibt es eine js/dom-syntax-lösung. wenn deine konstruktion diese ist

<td><a href="bla.html">Verweistext</a></td>

kannst du dieses machen:

<td><a href="bla.hml" onmouseover="this.parentNode.style.backgroundColor = '#000000'" onmouseout="this.parentNode.style.backgroundColor = '#ff0000'">Verweistext</a></td>

this.parentNode verweist dann auf das <td>-Element, das ja der Papa vom <a>-Element ist.

So du css-Klassen für den off und on-Status definiert hast (z.B. table.hoverIt .on und table.hoverIt .off), geht auch

<a ... onmouseover="this.parentNode.className='on'"> respektive off

Gruß, Uschi

[daniel84]

Hallo Newbie,

Ich möchte eine Tabelle mit Links erstellen und der gesamte Zelleninhalt, also auch der Hintergrund soll sich verändern.

http://www.tiptom.ch/homepage/faq.html?q=zellelink

Allerdings soll sich das nur auf eine bestimmte Tabelle beziehen und nicht global definiert sein. Wie also kann ich das erreichen. Habe keine Ahnung wie ich die CSS Formate nur innerhalb dieses Elementes definiere.

http://de.selfhtml.org/css/formate/zentrale.htm#individualformate

Gruss aus Luzern,
Daniel

[Zeromancer]

Hallo,

Ich möchte eine Tabelle mit Links erstellen und der gesamte Zelleninhalt, also auch der Hintergrund soll sich verändern. Allerdings soll sich das nur auf eine bestimmte Tabelle beziehen und nicht global definiert sein. Wie also kann ich das erreichen. Habe keine Ahnung wie ich die CSS Formate nur innerhalb dieses Elementes definiere.

Das Pseudoformat ":hover" wird vom IE nur für "a"-Elemente interpretiert. Ein Workaround könnte folgendmaßen aussehen

<table id="change_bg">
<tr>
  <td>bla</td>
</tr>
<tr>
  <td>bla</td>
</tr>
<tr>
  <td>bla</td>
</tr>
</table>

Für den IE musst du den Verweisen die Eigenschaften

display: block
width: ???
height: ???

zuweisen. Dann kannst du sie auch "hovern". Beispiel:

#change_bg a {
  display:block;
  width:12em;
  height: 1.4em;
  background: #fff;
}

#change_bg a:hover {
  background: #f00;
}

Wenn du den Tabellenzellen eine analoge Weite/Breite zuweist, sollte man kaum erkennen können, dass es sich um "gehoverte" Links handelt.

Prinzipiell eignen sich Listen aber eher für eine Navigation, sofern deine Tabelle keine tabellarischen Daten enthält. Anregungen könntest du dir bei Maxdesign holen.

Viel Spaß.

Mit freundlichen Grüßen

André