Mouseover in Tabellen

Dieses JavaScript ändert die Hintergrundfarbe wenn der Mauszeiger
über einen Tabellenbereich fährt. Besonders bei großen Tabellen ist diese Funktion nützlich.

Demo

Quelltext:

<script>
function ein(x) {
 document.getElementById(x).style.backgroundColor="#FFFF8C";
}

function aus(x) {
 document.getElementById(x).style.backgroundColor="transparent";
}
</script>

<table border="1">
 <tr>
  <th> Name </th>
  <th> Alter </th>
  <th> Land </th>
 </tr>
 <tr id="1" onMouseOver="ein('1');" onMouseOut="aus('1');">
  <td> Jörg </td>
  <td> 17 </td>
  <td> Deutschland </td>
 </tr>
 <tr id="2" onMouseOver="ein('2');" onMouseOut="aus('2');">
  <td> Michaela </td>
  <td> 15 </td>
  <td> Schweiz </td>
 </tr>
 <tr id="3" onMouseOver="ein('3');" onMouseOut="aus('3');">
  <td> Markus </td>
  <td> 18 </td>
  <td> Österreich </td>
 </tr>
</table>

      Wenn die Tabelle keinen farbigen Hintergrund hat, fügen Sie die Angabe transparent hinzu. Und bei einer farbigen Tabelle, fügen Sie die Tabellenhintergrundfarbe hinzu.

Im folgenden Beispiel wird auch der Tabellenkopfbereich (<th></th>) markiert.

Beispiel 2

Quelltext

<script>
function hor_ein(x) {
 document.getElementById(x).style.backgroundColor="#FFFF8C";
}

function hor_aus(x) {
 document.getElementById(x).style.backgroundColor="transparent";
}

function ver_ein(x) {
 document.getElementById(x).style.backgroundColor="#FFFF8C";
}

function ver_aus(x) {
 document.getElementById(x).style.backgroundColor="transparent";
}
</script>

<table border="1">
 <tr>
  <th id="A"> Name </th>
  <th id="B"> Alter </th>
  <th id="C"> Land </th>
 </tr>
 <tr id="aa" onMouseOver="hor_ein('aa');" onMouseOut="hor_aus('aa');">
  <td onMouseOver="ver_ein('A');" onMouseOut="ver_aus('A');"> Jörg </td>
  <td onMouseOver="ver_ein('B');" onMouseOut="ver_aus('B');"> 17 </td>
  <td onMouseOver="ver_ein('C');" onMouseOut="ver_aus('C');"> Deutschland </td>
 </tr>
 <tr id="bb" onMouseOver="hor_ein('bb');" onMouseOut="hor_aus('bb');">
  <td onMouseOver="ver_ein('A');" onMouseOut="ver_aus('A');"> Michaela </td>
  <td onMouseOver="ver_ein('B');" onMouseOut="ver_aus('B');"> 15 </td>
  <td onMouseOver="ver_ein('C');" onMouseOut="ver_aus('C');"> Schweiz </td>
 </tr>
 <tr id="cc" onMouseOver="hor_ein('cc');" onMouseOut="hor_aus('cc');">
  <td onMouseOver="ver_ein('A');" onMouseOut="ver_aus('A');"> Markus </td>
  <td onMouseOver="ver_ein('B');" onMouseOut="ver_aus('B');"> 18 </td>
  <td onMouseOver="ver_ein('C');" onMouseOut="ver_aus('C');"> Österreich </td>
 </tr>
</table>

Tipps

Browser-Sprachumschaltung

Diese Sprachumschaltung zeigt je nach der verwendeten Sprache (deutsch, englisch, ...) im Browser unterschiedlichen Inhalt an.

Seiten druckfrisch gestalten

Mancher Besucher einer Website möchte eine bestimmte Seite ausdrucken, auf dem Papier stören dann Elemente wie Werbung, Navigationsleisten, großflächige Design-Elemente oder andere Elemente. Wie Sie diese vor dem drucken "wegzaubern" erfahren Sie hier.

Seiten dynamisch mit PHP erstellen

Vielleicht kennen Sie dieses Problem: Sie möchten gerne eine Seite ohne Frames erstellen, wollen aber auch nicht bei jeder Änderung an der Navigation alle Seiten ändern. Nur mit HTML gibt es hier keine Lösung und nicht jeder Benutzer hat JavaScript im Browser aktiviert, stattdessen sollten Sie auf PHP zurückgreifen.