Ändern bei MouseOver
    


WWW.WEB-TOOLBOX.NET

BEISPIEL  ZURÜCK  SITEMAP  

  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







NACH OBEN