Farbverlauf bei Mausberührung

Farbverlauf bei Mausberührung

Sobald die Maus über den Button fährt, ändert dieser seine Farbe von einem hellen Gelb hin zu einem dunklen Farbton. Wird der Button geklickt, wird eine neue Seite geladen.

Zuerst wird ein Array definiert, das ist ein zweidimensionale Variable, deren Inhalte mit array[0], array[1], array[2]... angesprochen werden können. Unser Array heißt hexcolor und enthält die Zahlen von 1 - 16 des Hexadezimalsystems. Dieses wird für die Farbangaben in HTML verwendet: Wir haben also in dem Array schon alle möglichen Farbwerte gespeichert und können nun darauf zugreifen.

Das tut die Funktion mOver, die bei Mausberührung gestartet wird. Eine FOR-Schleife erhöht die Variable i jeweils um den Wert eins, bis sie den Wert sieben annimmt. Mit dieser Variable wird auf den Array zugegriffen.

Mit document.form.button.style.background ändern wir direkt die Style Sheet Angaben zur Hintergrundfarbe des Buttons. Der Farbwert, der aus sechs Zahlen oder Buchstaben besteht, wird dabei aus dem Array ausgelesen: hexColor[15-i]+'0'+hexColor[15-i]+'000'

Im ersten Durchlauf der Schleife hat i den Wert null, somit ergibt sich der folgende Farbwert: #F0F000 - ein helles Gelb. Im letzten Schleifendurchlauf hat i den Wert 6, also errechnet sich der Farbwert so: 15 - 6 = 9. An der 9. Stelle des Arrays steht die neun, also ist die Farbe #909000.

Die Funktion mOut weist dem Button die gleichen Farben in umgekehrter Reihenfolge zu. Natürlich lässt sich die Geschwindigkeit des Verlaufs verändern, anstatt der " i * 50" wird für die 50 ein anderer Wert eingetragen (je größer der Wert desto langsamer die Umwandlung...).

Sourcecode:

<head>

<script language="JavaScript">
hexColor = ["0","1","2","3","4","5","6","7","8","9","a","b","c","d","e","f"];

function mOver() {
for (i = 0; i < 7; i++) {
setTimeout('document.form.button.style.background = "#'+hexColor[15-i]+'0'+hexColor[15-i]+'000";', i * 50);
} }

function mOut() {
for (i = 8; i < 16; i++) {
setTimeout('document.form.button.style.background = "#'+hexColor[i]+'0'+hexColor[i]+'000";', i * 50);
} }

function clicked() {
window.location="http://www.xyz.de";
}
</script>

</head>

<body>

<form name=form>
  <input type=button name=button value="  ...mit der Maus über den Button bewegen...  " 
  onmouseover='mOver()'' onmousedown='document.form.button.value=" Danke "'
  onClick='clicked()' onmouseout='mOut()'
  style="background-color: #F0F000; width: 300px">
</form>

</body>

Hinweis:
Für Verweise auf Internetseiten gibt es in HTML das a-Element. In Verbindung mit onmouseover (also <a onmouseover...) werden solche Verweise von Suchmaschinen im Web nicht gefunden und sollten daher nicht verwendet werden.

Also statt:

 <a onMouseOver="window.status='www.wbrnet.info'; return true" onMouseOut="window.status=''; 
   "href="http://www.wbrnet.info/">Meine Webseite</a>
dieses verwenden:
 <a href="http://www.wbrnet.info/" title="www.wbrnet.info">Meine Webseite</a>
Sponsoren und Investoren

Sponsoren und Investoren sind jederzeit herzlich willkommen!
Wenn Sie die Information(en) auf dieser Seite interessant fanden, freuen wir uns über eine kleine Spende. Empfehlen Sie uns bitte auch in Ihren Netzwerken (z. B. Twitter, Facebook oder Google+). Herzlichen Dank!

Nach oben Sitemap
Impressum & Kontakt