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

PHP mit Sicherheit

Sicheres Programmieren – Traue niemals den Eingaben des Benutzers! Speichern Sie fremde Benutzereingaben nie ohne eine Überprüfung in einer Datenbank oder in einer Datei ab.

Mit PHP schreiben und lesen

Hier möchte ich an Beispielen zeigen, wie eine .txt-Datei mit PHP erstellt wird und wie diese ausgelesen werden kann.

Bilder mit Wasserzeichen markieren

JPEG-Bilder (oder andere Grafikformate) können mit einem transparenten Wasserzeichen markiert werden; Mit Hilfe eines kleinen PHP-Scripts.