 Tabellenzelle Hintergrundfarbe ändern bei MouseOver
Bewegt man den Mauszeiger über eine Tabellezelle, wird die Hintergrundfarbe gwechselt. Einsetzbar als 'Highligter' / 'Marker' in Listen zur besseren Lesbarkeit oder zur Hervorhebung.
|
|
Tabellenzelle-Hintergrundfarbe wählen
Die farbliche Hervorhebung bei MouseOver ist ihnen aus diversen Menüs bereits bekannt. Es kann aber ebenso in Tabellen ganz nützlich sein. Solange der Mauszeiger über der Tabellenzelle verweilt, ist eine Zeile leicht wieder auffindbar. Sei es nachdem man zum Telefon gegriffen hat oder weil man jemanden auf eine Textpassage aufmerksam machen möchte.
Grafiken zum Download rechtsklicken     
012345-12345678 - Hotline Kundenservice
|
012345-12345678 - Hotline techn. Fragen
|
012345-12345678 - Hotline Updates + PlugIns
|
012345-12345678 - Hotline neue Software
|
Bewegen sie den Mauszeiger über die Tabellenzellen!
Umsetzung
Farbänderungen bei MouseOver eingesetzt für eine Tabellenzelle. In das <td>-Tag werden diese beiden MouseEvent-Anweisungen eingebunden:
onMouseOver = ' this.bgColor="#FFD2FF" '
onMouseOut = ' this.bgColor="#EAEAFF" '
Das ist alles! Tragen sie die entsprechenden Farbwerte innerhalb doppelter Anführungszeichen ein. Beachten sie aber unbedingt die einstrichigen Anführungszeichen (Hochkommas), welche die gesamte Anweisung für onMouseOver / onMouseOut einschließen.
<table ... cellspacing="5" cellpadding="5" width="400">
<tr bgcolor="#EAEAFF">
<td onMouseover='this.bgColor="#FFFF80"' onMouseOut='this.bgColor="#EAEAFF"'>
<img src="telefon.gif" width="20" height="15" border="0" alt="">
012345-12345678 - Hotline techn. Fragen
</td>
</tr>
</table>
Ergebnis:
012345-12345678 - Hotline techn. Fragen
|
 Hintergrundfarbe Textboxen ändern (get Element By Id)
Erlemente hervorheben automatisch - Hintergrundfarbe ändern (get Element By Id)
|
Home • Farben • Hintergrundfarbe
Quellcode