Ändern bei MouseOver
    
 Home • Farben • bgcolor <div>  Download  Demo1  Demo2  Quellcode  BEISPIEL 

  Hintergrundfarbe Textboxen ändern  (<div>- Bereiche)

Bei MouseOver wird die Hintergrundfarbe für den Lesebereich geändert, bei MouseOut die ursprüngliche Farbe wieder eingestellt. Der Lesebereich erhält eine angenehme, weniger grelle Hintergrundfarbe.
Hintergundfarbe ändern bei MouseOver  (Hilfe beim Bildschirmlesen)

Sie haben das schon bei jungen Schülern beobachtet: "Mit dem Finger lesen".
Am Bildschrim wird häufig "mit der Maus gelesen"! Das bedeutet, der Mauszeiger unterstützt (als Marker) beim Lesen von Bildschirmtexten. Das sollten sie nutzen.

Lesen am Bildschirm kann anstrengend sein. Besonders dann, wenn die Lesetexte der Webseite in ungünstiger Farbauswahl dargestellt sind. Schließlich schauen ihre Augen im Prinzip ständig in eine Lichtquelle. Es gibt einige Hilfen, die das Lesen am Bildschirm erleichtern.

GROSSBUCHSTABEN sind am Bildschirm schwer zu lesen, ebenso kursive Schrift. Verwenden sie also keine Serifenschriften. Das sind Schrifttypen die kleine Häkchen haben wie z.B. Times. Für den Bildschirm optimal sind die Schriftarten Arial, Tahoma und Verdana.

Nur das stimmt nicht: "Am leichtesten liest sich immer noch eine schwarze Schrift auf weißem Grund." Ich finde eine dunkelgraue Textfarbe auf Weiß oder schwarzer Text vor einem weniger hellen Hintergrund liest sich leichter.

Dieses Beispiel zeigt ihnen, wie sie das für ihre Seite umsetzen können.


  Hintergrundfarbe für <div>- Bereich / Lesebereiche

(gilt grundsätzlich auch für <td> , <p> oder <span>-Bereiche)

Eine Option dem Seitenbesucher die Wahl der Hintergrundfarbe zu überlassen wäre es, die Farbe lediglich bei einem MouseEvent zu wechseln. Dazu werden die Textabschnitte in <div>-Bereiche eingeschlossen. Bei MouseOver wird dann die eingebundene Funktion aktiviert und von Weiß auf einen Pastellton umgeschaltet. Ihr Seitenbesucher kann diese Möglichkeit nutzen (mit MouseOver) oder auch nicht.

Schritt 1

Dazu schließen sie ihre Textblöcke in <div> , <p> oder <span>-Bereiche ein und geben dem Bereich eine eindeutige ID: 
<div id="box01">
Aliquam erat volutpat. Etiam tellus magna, ultrices quis, porttitor non, bibendum lacus.
Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia  Cum
sociis penatibus et magnis dis parturient montes, nascetur ridiculus mus. Sed felis.
Phasellus enim. Aliquam malesuada mi eu erat. Suspendisse potenti. In diam ante vel,
rutrum at, fringilla pulvinar, nunc
</div>
Schritt 2

Dann fügen sie 2 Anweisungen für einen MouseEvent ein, welche die Funktionen für den Farbwechsel aufrufen.

Das Ereignis MouseOver ruft die Funktion BgFarbe1() auf.
Das Ereignis MouseOut ruft die Funktion BgFarbe2() auf.
<div id="box01" onMouseOver="BgFarbe1('box01')" onMouseOut="BgFarbe2('box01')"> 
Aliquam erat volutpat. Etiam tellus magna, ultrices quis, porttitor non, bibendum lacus.
Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia  Cum
sociis penatibus et magnis dis parturient montes, nascetur ridiculus mus. Sed felis.
Phasellus enim. Aliquam malesuada mi eu erat. Suspendisse potenti. In diam ante vel,
rutrum at, fringilla pulvinar, nunc
</div>
... bei MouseOver rufe die Funktion 'BgFarbe1()' auf. Die Anweisungen sollen für das Seitenelement mit der ID 'box01' gelten.


  Die Funktionen

Das Script zur Änderung der Seitenhintergrundfarbe beinhaltet 2 Funktionen. Beim Aufruf wird den Funktionen die ID als Parameter übergeben. So ist es möglich die Funktionen für die Farbwechsel mehrmals einzusetzen. Die ID bestimmt also, für welches Seitenelement die Anweisung gelten soll. 

<script type="text/javascript" language="JavaScript">
<!-- Begin

function BgFarbe1(IdName)
{
document.getElementById(IdName).style.backgroundColor = "#F4FFF4";
}

function BgFarbe2(IdName)
{
document.getElementById(IdName).style.backgroundColor = "#FFFFFF";
}

//  End -->
</script>


  Aufruf im Body

In den beiden Anweisungen für die MouseEvents wird den Funktionen die ID übergeben:

<div id="box01" onMouseOver="BgFarbe1('box01')" onMouseOut="BgFarbe2('box01')"> 
Aliquam erat volutpat. Etiam tellus magna, ultrices quis, porttitor non, bibendum lacus.
Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia  Cum
sociis penatibus et magnis dis parturient montes, nascetur ridiculus mus. Sed felis.
Phasellus enim. Aliquam malesuada mi eu erat. Suspendisse potenti. In diam ante vel,
rutrum at, fringilla pulvinar, nunc
</div>

Im Beispiel wird der Aufruf der Funktion 'BgFarbe1()' bei MouseOver eingeleitet und der Wert für die Hintergrundfarbe geändert. Bei MouseOut wird die ursprüngliche Hintergrundfarbe durch den Aufruf der Funktion 'BgFarbe2()' wieder hergestellt.


Ein Beispiel, bei dem gleichzeitig Text und Hintergrundfarbe geändert werden, stelle ich demnächst zur Verfügung.




   Text-Kasten formatieren

Sie haben die Möglichkeit den Textblock in einen Kasten einzufassen und mit CSS Formatierungen für diese Box festzulegen. Dazu definieren sie im Head-Bereich eine CSS-Klasse (hier mit dem Namen 'kasten01'): 
<style type="text/css">
<!--
.kasten {
border:1px dotted #9F9F9F;
padding:15px;
width:500px;
color:#8F8F8F;
background-color:#FFFFFF;
}
-->
</style>
Die Formatierung weisen sie dem Seitenelement mit dem Attribut 'class' zu: 
<div id="box01" class="kasten" ...

<p id="box01" class="kasten" ...

<span id="box01" class="kasten" ...
Ergebnis:

Text

Ne vero prompta repudiare mel, per at inani timeam, sea quas dicam ut. No cum wisi option molestiae, quod etiam aliquyam in vim, ei saperet iudicabit disputando sit. Impetus euripidis sit et. Et iuvaret voluptua similique vim, vel ne fugit oporteat molestiae, tritani cotidieque vis ut.

Ipsum mandamus pro in, quando mollis omittam ut usu. Ius et dicta utinam, sea mollis numquam noluisse cu. Fierent dolores expetendis vel eu, sed et adipiscing incorrupte quaerendum. An vix cetero maiorum, cu duo molestie expetenda.

Ea quo brute nihil, oportere dignissim qui no, vis primis nonummy placerat ne. No vel facete meliore, mel feugiat nostrum ne, everti impedit eu quo. Quo quas appetere eu, te praesent mediocrem efficiendi sea, mel labitur feugait in. Magna disputationi eos in, aperiri epicurei verterem ad his. Iuvaret scaevola tractatos te vim, ludus quodsi ex cum. Ex efficiendi suscipiantur mei.

In putent tibique per, iusto lobortis te sea, no mucius adipisci expetendis sea. Usu eu iusto maiestatis posidonium. Stet intellegam his ei, has ut omnium dignissim gloriatur. Pri ne puto vituperata.







Eine sinnvolle Anwendung zur Hervorhebung von Tabellenzellen finden sie hier

Hintergrundfarbe in einer Tabellenzelle bei MouseOver ändern