Mouseover in Tabellen [IE|M|O]

von: Werner Zenk

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

Beispiel:

Name	Alter	Land
Jörg	17	Deutschland
Sabine	15	Österreich
Lars	18	Schweden
Urs	16	Schweiz
Jacek	15	Polen
Florence	14	Frankreich

Quelltext:

<script type="text/javascript">
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:

Name	Alter	Land
Jörg	17	Deutschland
Sabine	15	Österreich
Lars	18	Schweden
Urs	16	Schweiz
Jacek	15	Polen
Florence	14	Frankreich

Quelltext:

<script type="text/javascript">
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>

Und Ihre Meinung? Sie vermissen auf dieser Seite wichtige Informationen oder haben Hinweise für uns?

Wolle: Wenn ich vorher die Farben der Tabelle mit CSS in Abhängigkeit von Zeileninhalt definiert habe, wie erhalte ich die ursprüngliche Farbe zurück? Werner: Der Hintergrund des Zeileninhalts sollte eine einheitliche Farbe haben. Und diese Farbe muss dann bei "transparent" hinein geschrieben werden. Friedrich: Ist es eigtl. auch möglich ein backgroundImage anstatt einer backgroundColor zu bestimmen? Werner: Ja, das geht auch: document.getElementById("x").style.backgroundImage="url(bild.gif)"; Yvonne: Toll, danke für die Anregungen ) Renate: Wenn ich eine zweite Tabelle unter die erste setze, funktioniert mouseover bei der zweiten Tabelle nicht. Woran kann das liegen? Werner: In der zweiten Tabelle müssen andere ID stehen. Eine ID darf nur einmal auf der Seite vorkommen!
Hilfe finden Sie im » netzgemein.de - Forum. Auch als „Gast” können Sie dort Fragen stellen!

Das könnte Sie interessieren:

Escape-Zeichen - (Escape-Codes) Formatierung von auszugebenden Texten in JavaScript oder PHP.

Linkliste - Zeigt die Hyperlinks einer Seite an.

E-Mail Button mit Textvorbelegung

Silversurfer

Eingabefeld fokusieren - Beim Laden der Seite wird das Eingabefeld fokusiert.

JS-Index

Name Rückwärts schreiben! …mehr