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 dass ein (type="image") nicht so einfach manipulierbar ist.

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" width="..." height="..." /></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.

Hinweis:

Da Zeilenumbrüche wie Leerzeichen interpretiert werden, führt

<a href="https://irgendwas.erde">
<img src="https://irgendwas.erde/einbild.jpg" alt="..." />
</a>

dazu, dass vor und nach dem Bild im Endeffekt ein Leerzeichen steht, was bei einem Link zu einem unterstrichenen Leerzeichen führen könnte.

Besonders einfach vermeiden Sie das, indem Sie es entweder in eine Zeile schreiben, oder im offenen Tag umbrechen.

<a href="https://irgendwas.erde"><img
src="https://irgendwas.erde/einbild.jpg" alt="..." /></a>

So gibt es keinerlei Leerzeichen zwischen a und img.

Das Beispiel

<script type="text/javascript"><!--
var out="";
var limg="";

function off() {

// onmouseover-Effekt von Thomas Salvador, 2000, brauchbar.de
// Wiederverwendung erlaubt, solange der Hinweis vollstaendig und
// unveraendert erhalten bleibt. Verwendung ohne oder mit veraendertem
// Hinweis ist nicht erlaubt.
// Ein BackLink zur Site wird erbeten.

  if (out=="") { return; }

  if (document.images) {
    document.images[limg].src=out;
    out="";
  }
}

function on(img,o1,o2) {
  if (document.images) {

  if (out != "") { off(); }

    document.images[img].src=o1;
    out=o2;
    limg=img;
  }
}
//-->
</script>

<form name="einformular" action="https://brauchbar.de/wd/artikel/14.html" method="get">
Wie finden Sie diesen Effekt? (Schulnote)
<select name="rate">
  <option name="na" selected="selected">0</option>
  <option name="a">1</option>
  <option name="b">2</option>
  <option name="c">3</option>
  <option name="d">4</option>
  <option name="e">5</option>
  <option name="f">6</option>
</select><br>

<a href="#"
  onmouseover="on('submitgrafik', '/images/submiton.gif', '/images/submitoff.gif');"
  onmouseout ="off();"
  onclick="document.einformular.submit(); return false;"><img
  name="submitgrafik" src="/images/submitoff.gif" width="50" height="50" border="0"
  alt="Submit" /></a>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
<a href="#"
  onmouseover="on('resetgrafik', '/images/reseton.gif', '/images/resetoff.gif');"
  onmouseout ="off();"
  onclick="document.einformular.reset(); return false;"><img
  name="resetgrafik" src="/images/resetoff.gif" width="50" height="50" border="0"
  alt="Reset" /></a>
</form>

liefert

Wie finden Sie diesen Effekt? (Schulnote)
Submit       Reset

Beim Bewegen des Mauszeiger werden die Bilder für die Ersatz-Button submit und reset hin- und hergesetzt.

Mit Klick wird die jeweilige Funktion mit JavaScript ausgelöst.