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)

Bookmark setzen... These icons link to social bookmarking sites where readers can share and discover new web pages.
  • Print
  • Digg
  • Sphinn
  • del.icio.us
  • Facebook
  • Mixx
  • Bloglines
  • MisterWong
  • MySpace
  • Reddit
  • SEOigg
  • Technorati
  • TwitThis
  • Y!GG
  • Google Bookmarks

Weiterführende Links: