Seiten-Hintergrundfarbe ändern bei MouseOver
Bei MouseOver wird die Hintergrundfarbe geändert, bei MouseOut die ursprüngliche Farbe wieder eingestellt. Die MouseOut-Funktion kann auch entfallen, um die gewählte MouseOver-Farbe beizubehalten.
Einsatz
Eine Möglichkeit der Anwendung wäre z.B. dem Seitenbesucher die Wahl der Hintergrundfarbe zu überlassen, um Abhängig von den Lichtverhältnissen der Umgebung zwischen Weiß oder einem hellen Grauton umzuschalten. Außerdem:
Textpassagen bei Mouseover hervorheben oder spielerische Aha-Effekte hervorrufen? Ein Farbwechsel bei MouseOver machts möglich. Für eine Demo bewegen sie den Mauszeiger über den Kasten rechts.
Was sie rechts sehen werden, ist kein Bildtausch mit JavaScript sondern lediglich die Anderung der Hintergrundfarbe.
|
|
|
Script im Head
Das Script zur Änderung der Seitenhintergrundfarbe beinhaltet 1 Funktion. Beim Aufruf wird der neue Farbwert übergeben. So ist es möglich mehrere, unterschiedliche Farbeffekte mit einer einzigen Funktion zu verwirklichen.
Im Beispiel wird der Aufruf der Funktion 'neueFarbe()' bei einem MouseEvent eingeleitet. Bei MoseOver wird die Hintergrundfarbe getauscht, bei MouseOut der alte Zustand durch eine erneute tauschaktion wieder hergestellt.
<script type="text/javascript" language="JavaScript">
<!-- Begin
function neueFarbe(wahlfarbe)
{
document.bgColor=wahlfarbe;
}
// End -->
</script>
Aufruf im Body
Sie können der Funktionsaufruf in einen Textlink oder auch in ein Image-Tag einbinden. Mit einem transparenten Image als als Verweisfläche sorgen sie für Überraschungen.
Hier wir der neue Farbwert übergeben
<a href="#"
onMouseOver="neueFarbe('#FF7F00');"
onMouseOut="neueFarbe('#FFFFFF');"
>
bewegen Sie den Mauszeiger über diesen Link
</a>
Die JavaScript-Anweisung zur Änderung der Dokument-Hintergrundfarbe 'beißt sich' u.U. mit Notierungen für die Hintergrundfarbe in CSS-Anweisungen.

Eine sinnvollere Anwendung zur Hervorhebung von Tabellenzellen finden sie hier
Hintergrundfarbe in einer Tabellenzelle bei MouseOver ändern

|