 |
 Kennen Sie Hover-Links? Das bedeutet, dass ein Link die Farbe wechselt, sobald man ihn mit dem Mauszeiger berührt. Eine ähnliche Technik ist auch mit Formularen realisierbar. Nur ist der Auslöser hier nicht, dass das Feld mit der Maus berührt wird, sondern dass das Feld aktiviert wird.
Vorteile
Welche Vorteile hat das?
- Es sieht gut aus und lässt Ihre Seite moderner wirken.
- Der Benutzer hat eine bessere Orientierung und direktes Feedback. Ohne das empirisch untersucht zu haben, stellen wir deswegen die These auf, dass dadurch die Usability verbessert wird.
Realisierung
Wir werden das Problem angehen, indem wir die JavaScript-Event-Handler für ein Aktivieren bzw. Verlassen der Felder für den Farbwechsel verwenden.
Folgendes Beispiel zeigt das in der Praxis:
<html>
<body>
<style type="text/css">
body {font-family: Verdana;}
input {border-color: black; background: #white}
</style>
<form>
<h1>Bitte Daten angeben:</h1>
<table>
<tr>
<td>Vorname:</td>
<td><input type="text" onFocus="this.style.backgroundColor='#c6e4f4'" onBlur="this.style.backgroundColor='white'"></td>
</tr>
<tr>
<td>Nachname:</td>
<td><input type="text" onFocus="this.style.backgroundColor='#c6e4f4'" onBlur="this.style.backgroundColor='white'"></td>
</tr>
<tr>
<td>Wohnort:</td>
<td><input type="text" onFocus="this.style.backgroundColor='#c6e4f4'" onBlur="this.style.backgroundColor='white'"></td>
</tr>
<tr>
<td>Land:</td>
<td><input type="text" onFocus="this.style.backgroundColor='#c6e4f4'" onBlur="this.style.backgroundColor='white'"></td>
</tr>
</table>
<input type="submit" value="Abschicken!">
</form>
</body>
</html>
Hinweis: um die Hintergrundfarbe der Formulare zu ändern, müssen Sie den Code an verschiedenen Stellen modifizieren:
- Der
<style>-Abschnitt muss angepasst werden
- Die einzelnen
onBlur-Handler müssen geändert werden.
Partner-Link
JavaScript wurde schon immer für außergewöhnliche Extras auf der Website verwendet. Wahre Klassiker hierbei sind die Hover Buttons und Banner Rotators. Lesen Sie hier, wie diese programmiert werden.
http://www.exine.de/scripting/klassiker.shtml
|
|
|
|
Sie wollen diese Seite ausdrucken? Dafür haben wir eine spezielle Druckversion ohne grafische Elemente entwickelt! |
|
|
Einführung in CSS bei HTMLWorld.
|
|
