Formulareffekte – Das aktive Formularelement

Die Maus, der Cursor…Vor allem bei Formularen mit vielen Feldern verirrt man sich leicht, und findet seinen Cursor nicht wieder. Wie Sie dieses Problem schnell und elegant lösen, erfahren Sie hier…

Um dem Besucher zu "zeigen", dass er eben das Feld ausgewählt
hat, muss dieses sich im Vergleich zu den anderen, optisch hervorheben.
Es gibt mehrere Möglichkeiten diese Hervorhebungen zu erzeugen.
Unabdingbar ist die Verwendung von Stylesheets.

Man kann mit dem InternetExplorer 5.5 einen sogenannten Filter
verwenden, der Objekte verblassen lässt. Anhand dieses Filters,
und ganz wenig JavaScript lässt sich dieser Effekt schnell
erzeugen.

Das Ergebnis dieses Effektes sieht in etwa so aus:


Nicht ausgewählt…


Ausgewählt

Der Code dafür ist ebenfalls sehr einfach zu verstehen. Es
wird nur von den zwei Eventhandlern "onFocus" und
"onBlur" gebrauch gemacht. "onFocus"
ist der Zustand, bei dem man das Element auswählt, "onBlur"
ist genau das Gegenstück dazu, es beschreibt den Zustand beim
Verlassen des Objektes.

<input type="text" onfocus="this.style.filter
=’Alpha(opacity=80)’;"
onBlur="this.style.filter =’Alpha(opacity=20)’;"
style="border: 2 solid darkblue; filter: Alpha(opacity=20)"
value="Senden">

Wie bereits gesagt besteht der Code aus zwei Hauptsächlichen
Bestandteilen. Es muss nun definiert werden, was bei den jeweiligen
"Events" geschehen soll. Hierzu muss das Objekt, also
das Textfeld angesprochen werden. Dies geschieht mit dem allgemeinem
Bezeichner "this". Mit ihm wird Hintereinander erst das
Element, dann dessen Style-Attribut, und dann das filter-Attribut
des Styles angesprochen. Die Art des Aufrufes ist verschachtelt.
Darauf folgt die Angabe für den Filter.
Sie müssen darauf achten, dass Sie im wirklichen Style-Attribut
des Elementes die gleichen Anfangsbedingungen für den Filter
setzen, wie Sie diese auch für das Event "onBlur"
setzen, da diese ja wieder zu den Anfangsbedingungen zurückwechselt.

Diese Effekte lassen sich natürlich genause auf alle anderen
Formularelemente anwenden, zudem können Sie auch andere HTML-Elemente
wie Bilder und Tabellen mit einem solchen Trick bearbeiten.

This entry was posted in HTML Tricks. Bookmark the permalink.

Leave a Reply

Your email address will not be published. Required fields are marked *