http://www.tiptom.ch/homepage/ - Homepage-Tips von Thomas Lüthi

Sie sind hier: tiptom.ch > Homepage-Tips > FAQ

Wie erreiche ich, dass eine Tabellenzelle bei MouseOver die Farbe wechselt bzw. ein klickbarer "Link" ist?

Gemäss der CSS 2.0 Spezifikation kann man die Pseudoklasse :hover für beliebige Elemente verwenden, also z.B. auch für eine Tabellenzelle, eine ganze Tabellenzeile oder auch für beliebige andere Block-Level- und Inline-Elemente.

Mozilla, Opera (ab Version 7) und andere moderne Browser ändern dann die Farben und anderen angegebenen Eigenschaften, wenn der Mauszeiger über der Tabellenzelle bzw. über dem betreffenden Element ist.

Der MS Internet Explorer kann das bis Version 6.0 leider nicht.

1. Mit CSS

a) Link in Tabellenzelle

Mit CSS kann man sagen, dass der Link die Tabellenzelle vollständig ausfüllen soll.

Eigentlich sollte dafür td a { display:block } reichen, aber für den MS Internet Explorer ist es oft zusätzlich notwendig, auch noch width:100%; hinzuzufügen.

Komplettes Beispiel:
HTML:
<td><a href="bla.html">Linktext</a></td>
CSS:
td a { display:block; width:100%; }

So sieht's aus: Beispiele.

b) Tabellenzelle ohne Link

Für moderne Browser (Mozilla, Opera 7) reicht für den Farbwechsel einer Tabellenzelle:
td:hover { color:#660000; background-color:#ffff66; }
Der MS Internet Explorer kann das bis Version 6.0 leider nicht.

So sieht's aus: Beispiele.

2. Mit JavaScript

a) Farbe bzw. Klasse einer Zelle oder Zeile wechseln

HTML:
<td class="normal" onmouseover="this.className='spezial';" onmouseout="this.className='normal';">Text</td>
bzw.
<tr class="normal" onmouseover="this.className='spezial';" onmouseout="this.className='normal';"> <td>Text1</td> <td>Text2</td> </tr>
CSS:
.normal { color:#000000; background-color:#ffffff; }
.spezial { color:#660000; background-color:#ffff66; }

Erklärung:
Mit onmouseover="this.className='spezial';" wechselt man die Klasse der Zelle bzw. Zeile, solange der Mauszeiger sich über der Zelle/Zeile befindet.
Mit onmouseout="this.className='normal';" setzt man wieder die ursprüngliche Klasse, sobald die Maus die Zelle/Zeile verlässt.

a) Farbe bzw. Klasse einer Zelle oder Zeile wechseln sowie ganze Zelle/Zeile zu einem klickbaren Link machen:

HTML:
<td class="normal" onmouseover="this.className='spezial';" onmouseout="this.className='normal';" onclick="window.location.href='http://www.example.com/';">Text</td>
bzw.
<tr class="normal" onmouseover="this.className='spezial';" onmouseout="this.className='normal';" onclick="window.location.href='http://www.example.com/';"> <td>Text1</td> <td>Text2</td> </tr>
CSS:
.normal { color:#000000; background-color:#ffffff; }
.spezial { color:#660000; background-color:#ffff66; cursor:pointer; }

Erklärung:
Mit onclick="window.location.href='http://www.example.com/';" wird die ganze Zelle bzw. Zeile zu einem "Link", d.h. wenn der Benutzer irgendwo auf die Zelle/Zeile klickt, wird die Ziel-URL im gleichen Fenster geladen.

Mit der CSS-Angabe cursor:pointer sagt man dem Browser, dass er als Cursor das Symbol nehmen soll, das er auch bei normalen Links anzeigt (oft eine Art "Händchen").
MS Internet Explorer kennt cursor:pointer erst ab Version 6.0; für ältere Versionen müsste man proprietären, nicht validen CSS-Quellcode verwenden: cursor:hand
Um sowohl anständige Browser als auch MS Internet Explorer 5.x zu bedienen, muss man offenbar folgendes schreiben:
{ cursor: pointer; cursor: hand; }
Siehe auch: Quirksmode.org - Cursor styles
http://www.quirksmode.org/css/cursor.html#pointer

Wichtig: Sorgen Sie dafür, dass alle Inhalte auch ohne CSS und JavaScript erreichbar sind! Bieten Sie auch ganz normale Links an, und verwenden Sie obige JavaScript-Spielereien (klickbare Zellen als "Link") nur in Ergänzung zu einer normalen Navigation.

So sieht's aus: Beispiele.

---

Auf diesen FAQ-Eintrag verlinken:
Wie erreiche ich, dass eine Tabellenzelle bei MouseOver die Farbe wechselt bzw. ein klickbarer "Link" ist?
http://www.tiptom.ch/homepage/faq.html?q=zellelink

Zur Liste mit allen Fragen

Zum Seitenanfang

---