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.

Bookmark setzen... These icons link to social bookmarking sites where readers can share and discover new web pages.
  • Print
  • Digg
  • Sphinn
  • del.icio.us
  • Facebook
  • Mixx
  • Bloglines
  • MisterWong
  • MySpace
  • Reddit
  • SEOigg
  • Technorati
  • TwitThis
  • Y!GG
  • Google Bookmarks

Weiterführende Links: