display:blockDiese Angabe reicht theoretisch schon aus, damit der Link die ganze Breite der Zelle einnimmt.
In Mozilla "funktioniert" es auch wie erwartet.
In einigen Versionen von MS Internet Explorer
muss man aber mit der Maus über den Text gehen,
damit der :hover-Effekt eintritt
und der Link klickbar wird.
| URL | Typ |
|---|---|
| http://www.google.com | Suchmaschine |
| http://www.search.ch | Suchmaschine |
| http://dmoz.org | Verzeichnis |
| http://dir.yahoo.com | Verzeichnis |
display:block und width:100%"Funktioniert" in Mozilla und MS Internet Explorer.
| URL | Typ |
|---|---|
| http://www.google.com | Suchmaschine |
| http://www.search.ch | Suchmaschine |
| http://dmoz.org | Verzeichnis |
| http://dir.yahoo.com | Verzeichnis |
"Funktioniert" in Mozilla und MS Internet Explorer, sofern JavaScript aktiviert ist.
| Nr. | Text + Link | Code | Mit JavaScript | Ohne JavaScript |
|---|---|---|---|---|
| 1. | Google www.google.com | <td onMouseOver ... | Zelle: Farbwechsel, Link klickbar | Link klickbar |
| 2. | Google www.google.com | <td onMouseOver ... onClick ... | Zelle: Farbwechsel und klickbar | Link klickbar |
| 3. | Google www.google.com | <td onMouseOver ... onClick ... | Zelle: Farbwechsel und klickbar | Link klickbar |
| 4. | Google www.google.com | <tr onMouseOver ... | Ganze Zeile: Farbwechsel, Link klickbar | Link klickbar |
| 5. | Google www.google.com | <tr onMouseOver ... onClick ... | Ganze Zeile: Farbwechsel und klickbar | Link klickbar |
| 6. | Google www.google.com | <tr onMouseOver ... onClick ... | Ganze Zeile: Farbwechsel und klickbar | Link klickbar |
Wenn man mit der Maus über die Zellen der folgenden Tabelle geht, wechseln diese die Farbe.
Wenn man darauf klickt, passiert nichts, denn es sind keine Links und auch kein JavaScript im Spiel.
Das ganze basiert auf CSS:
td:hover { ... }
"Funktioniert" in Mozilla und Opera ab 7, nicht aber im MS Internet Explorer bis 6.0.
| Diese Zelle wird rot ... | ... und diese blau. |
Beispiel zur FAQ von Thomas Lüthi, info@tomogramm.ch