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.

Umstellung von der PHP-Funktion mysql() zu mysqli()

Zur Zeit stellen viele Provider auf PHP 7 um, mit dieser neuen PHP-Version werden viele "alte" Scripte nicht mehr laufen die auf eine Datenbank zugegriffen haben.

Webseiten schneller machen

Webseitenbesucher sind ungeduldig, um Besucher und Suchmaschinen bei der Stange zu halten, darf Ihre Website keine Zeit verlieren.