brauchbar.de - WebDesign, Programmierung,Development in HTML, CSS, Javascript, PHP, Perl und mehr

[ Startseite | Artikel : HTML · JavaScript · CSS · Perl · Usability · Sonstiges | Services | Über ]


verwandte Artikel und Seiten

MouseOver für Submit und Reset

von Thomas Salvador.

In "Der MouseOver-Effekt" hatten wir den MouseOver-Effekt vorgestellt und erläutert. Nun werden wir dieses Wissen nutzen und Submit- und Reset-Button mit diesem Effekt ausstatten.

Das Problem

Im Zusammenhang mit Feldern gibt es etliche Feldertypen, die Daten aufnehmen können, strukturiert oder unstrukturiert. Einzelheiten hierzu bringt das Formulartutorial vom gleichen Autor. Neben den Datenfeldern gibt es die Kommandos "submit", um die Daten an das verarbeitende Programm zu übergeben und "reset", um das Formular zurückzuzetzen und neu auszufüllen. Beide werden durch übliche Buttons dargestellt. Für Submit kann man mit einem anderen Typ Grafiken anstelle des Buttons setzen.

Allen gemein ist, dass den Buttons höchstens mit CSS etwas Hover-ähnliches zu entlocken ist, was derzeit nicht portabel ist (bis NS6.x) und das ein (type=image) nicht so einfach manipulierbar sind. Was also tun?

Die Lösung

Eine Lösung des Problems "MouseOver-Effekt für Submit und Reset" liegt in der Improvisation und der Schaffung eines Look-a-like/work-a-like. Wir verwenden also gänzlich normale Grafik,

<img name=submitgrafik src="submitoff.gif" width=... height=...>

die anstelle von Submit in unserem Formular

<form name=einformular action="...">
...
  <img name=submitgrafik src="submitoff.gif" width=... height=...>
</form>

steht.

Mit den in "Der MouseOver-Effekt" entwickelten Routinen geben wir der Grafik submitgrafik nun den gewünschten Effekt und lassen sie von submitoff.gif auf subon.gif wechseln, wenn der Mauszeiger sie berührt.

<form name=einformular action="...">
...
<a href="alternativ.html"
   onmouseover="on('submitgrafik', 'submiton.gif', 'submitoff.gif');"
   onmouseout ="off();">
<img name=submitgrafik src="submitoff.gif" width=... height=...></a>
</form>

Damit aus der Grafik nun auch ein Submit-Button wird und das Formular funktioniert, fordern wir über den onclick-Event der Referenz zusätzlich, dass das betreffende Formular einformular abgesendet wird.

<form name=einformular action="...">
...
<a href="alternativ.html"
   onmouseover="on('submitgrafik', 'submiton.gif', 'submitoff.gif');"
   onmouseout ="off();"
   onclick="document.einformular.submit(); return false;">
<img name=submitgrafik src="submitoff.gif"></a>
</form>

Gänzlich analog erzeugen wir eine Reset-Button-Grafik resetgrafik und fügen Sie noch hinzu. Hier heißt die Aktion reset().

Als Ergebnis erhalten wir:

<form name=einformular action="...">
...
<a href="alternativ.html"
   onmouseover="on('submitgrafik', 'submiton.gif', 'submitoff.gif');"
   onmouseout ="off();"
   onclick="document.einformular.submit(); return false;">
<img name=submitgrafik src="submitoff.gif"></a>
&nbsp;&nbsp;&nbsp;
<a href="alternativ.html"
   onmouseover="on('resetgrafik', 'reseton.gif', 'resetoff.gif');"
   onmouseout ="off();"
   onclick="document.einformular.reset(); return false;">
<img name=resetgrafik src="resetoff.gif"></a>
</form>

Damit der MouseOver funktioniert, müssen Sie natürlich jeweils das JavaScript die Effekt-Routinen mit in der Datei bzw. aus dieser erreichbar haben. Die &nbsp;-Folge dient der Abstandgebung. Dies könnte man natürlich auch anders machen.

Betrachten Sie noch das Beispiel, wo einem Formular diese Button gegeben wurden. Mit aktiviertem Effekt.


Verwandte Artikel und Seiten



brauchbar web
Diese Site anlinken. Artikel zu CSS | HTML | JavaScript | Perl | Usability | Sonst. | nach Ausgabe.

Copyright © 1999-2015 Thomas Salvador und brauchbar.de . Alle Rechte vorbehalten. Gehostet bei all-inkl.
Reproduktion, ganz oder in Teilen, nur mit schriftlicher Zustimmung von Thomas Salvador. Impressum · Datenschutzerklärung · Kontakt.

zum Inhaltsverzeichnis der 30. Ausgabe.

Linken Sie bitte zu der festen Adresse http://www.brauchbar.de/wd/artikel/14.html .