Kleine Tabelleneffekte mit CSS und JS

Eine Tabelle, deren Rahmenfarbe sich bei Mouse Over ändert, oder dessen ganzer Inhalt seine Farbe verändert. Spielerreihen mit CSS und JavaScript…

Vielleicht haben Sie es schon einmal gesehen, eine Tabelle, die
bei MouseOver ihre Rahmenfarbe, oder die Hintergrundfarbe wechselt.
Ein einfacher Effekt, zu dem nicht viel dazu gehört.
Der Code ist eine Mischung aus JavaScript und CSS. Mit JavaScript
wird durch die Eventhandler "onmouseover", und "onmouseout"
das Styleattribut des Elements verändert.

Demo:

Hallo

Eine einfache JavaScript-Funktion macht dies möglich.

<script
language="JavaScript">

function change_to(element) {

element.style.border =’1 dotted blue’;
element.style.color =’blue’;
element.style.backgroundColor =’#CCCCCC’;
}
function change_back(element) {
element.style.border =’1 solid red’;
element.style.color =’red’;
element.style.backgroundColor =’#FFFFFF’;
}

</script>

Aus
dem Element, wie wählen eine Tabelle kann nun diese Funktion
aufgerufen werden.

<table cellpadding="3" cellscpacing="0" border="0">
<tr>
<td onmouseover="change_to(this);" onmouseout="change_back(this);"
style="border: 1 solid red; color:red;back">Hallo</td>
</tr>
</table>

Der Aufruf der beiden Funktionen erfolgt durch die Eventhandler.
An diese Funktionen wird das Element übergeben. Dabei wird
als Elementname "this" verwendet. Dieses "this"
spricht immer das aktuelle Objekt an, in diesem Fall die einzelne
Tabellenzelle.

Die Styledefinitionen im Skript sind recht einfach. Da das Element
an die Funktion übergeben worden ist, kann diese auf die einzelnen
Attribute des Elementes zugreifen, und diese verändern.
Mit element.style.border wird
der Rahmen im style-Attribut beschrieben. Genau so
geschieht es auch mit den anderen Styledefinitionen.

Die Funktion change_back(element) wird über den onmouseout
Eventhandler angesprochen. In ihr wird definiert, wie das Element
aussehen soll, wenn sich die Maus nicht mehr darüber aufhält.

Hier wird das Style wieder so definiert, wie es auch im style-Attribut
des Elementes aussieht, sodass sich der Effekt umkehrt.

(tf)

This entry was posted in Javascript Tricks. Bookmark the permalink.

Leave a Reply

Your email address will not be published. Required fields are marked *