Christoph Schnauß: Anzeige von Tabellen steuern

Beitrag lesen

hallo NiX,

Wenn jemand beispielsweise mit der Maus über den Link <a href="mailto:nix@dejanix.com">NiX</a> fährt, soll unten die Tabelle
<table>
  <tr>
    <td>Das bin ich</td>
  </tr>
</table>
erscheinen.
Wie mache ich das?

Leider (noch) nicht ausschließlich mit CSS. Du brauchst einen (Javascript-)EventHandler dazu.

Habe was von a:hover, onmouseover und display: none gehört, aber ich brachte da nichts sinnvolles zusammen.

"a:hover" ist für diese Aufgabe relativ unwichtig, die beiden anderen jedoch nicht. "onmouseover" ist dabei der EventHandler, und "display" ist ein CSS-Element.

Vorgehen kannst du folgendermaßen:
zuerst bekommt deine Tabelle eine ID oder einen Namen und wird mit "display:none" unsichtbar gemacht.
<table id="tabelle" style="display:none">
<tr><td>Das bin ich</td></tr>
</table>

Dann sorgst du dafür, daß in deinem link der EventHandler aufgerufen wird und einfach "display:none" gegen "display:inline" oder etwas ähnliches austauscht. Das geht so:
<a href="mailto:nix@dejanix.com" onmouseover="document.getElementById('tabelle').style.display='inline'">NiX</a>

Das wars.

Wenn du ganz auf Javascript verzichten möchtest, gibt es doch einen Weg, mit "a:hover" zu experimentieren. Leider interpretiert aber der IE "hover" bisher ausschließlich bei links (<a>), sonst wärs eine prima Geschichte. Ein Beispiel, wie man das anstellen kann, findest du unter http://aktuell.de.selfhtml.org/tippstricks/css/infobox/index.htm

Grüße aus Berlin

Christoph S.