Forenindex » Programmierung/Entwicklung » JavaScript » Bildwechsel bei Mausklick für Submit-Button

Bildwechsel bei Mausklick für Submit-Button

ruebe
Beiträge gesamt: 1113

12. Aug 2004, 16:13
Bewertung:

gelesen: 4204

Beitrag als Lesezeichen
Hallo,

gibt es eine Möglichkeit einen grafischen Submitbutton zu verändern wenn man mit der Maus draufklickt? Also ähnlich wie beim Rollover, jedoch beim Klick und bei einem Formular?

Brauche es für eine Intranet-Seite (IE), muss also nicht in jedem Browser funktionieren.

Danke und liebe Grüße
René
---------------------
Es gibt nichts Schöneres, als dem Schweigen eines Dummkopfes zuzuhören.
(Helmut Qualtinger)

Bildwechsel bei Mausklick für Submit-Button

Markus Walker
Beiträge gesamt: 494

13. Aug 2004, 10:56
Bewertung:

gelesen: 4204

Beitrag als Lesezeichen
Müsste möglich sein, siehe Beispiel unter:
http://de.selfhtml.org/...htmlelemente.htm#img

Bildwechsel bei Mausklick für Submit-Button

ruebe
Beiträge gesamt: 1113

13. Aug 2004, 11:48
Bewertung:

gelesen: 4204

Beitrag als Lesezeichen
Hallo Markus,

vielen Dank für den Link. Ich befürchte aber dass wir da aneinander vorbei reden bzw. ich hab mich schlecht ausgedrückt.

Ich habe einen grafischen Submit-Button (<input type="image" src="../images/other/speichern_button.gif" alt="speichern">) in ein Formular eingebunden. Wenn man da drauf klickt, dann werden Daten gespeichert. Beim Klick sollte aber der Button ein anderes Bild bekommen - also zB der Schatten soll verschwinden.

Hintergrund:
Wenn man auf einen Submit-Button klickt (!die Maus aber nicht loslässt) ändert der sich optisch (hier bei Safari wird er blau). Zieht man jetzt den Mauszeiger (immer noch im gedrückten Zustand) vom Button weg und lässt erst dann die Maus los, dann wird eben nicht gespeichert/gesendet/abgeschickt.

Bei dem Beispiel von SelfHTML ändert sich der Text oberhalb - aber nicht der Button selbst.

Leider bin ich in JS auch nicht sonderlich fit (mache alles mit GoLive), was natürlich die Sache sehr verkompliziert ...

Hoffe Du hast noch einen Tipp für mich

Danke und liebe Grüße
René
---------------------
Es gibt nichts Schöneres, als dem Schweigen eines Dummkopfes zuzuhören.
(Helmut Qualtinger)

Bildwechsel bei Mausklick für Submit-Button

Markus Walker
Beiträge gesamt: 494

13. Aug 2004, 11:57
Bewertung:

gelesen: 4204

Beitrag als Lesezeichen
Naja, ich denke ich habe schon verstanden, aber natürlich noch nicht jedes Detail beschrieben, da ich davon aus ging, dass nur das Austauschen des Bildes ein Problem darstellt.

Wenn ein Submit-Button betätigt wird, wird der onsubmit Event getriggert. Dieser Event kann dann die Funktion triggern, welche das Bild austauscht. Wenn die Maus gedrückt vom Submit-Button gezogen wird, wird kein onsubmit Event getriggert, womit das bestehende Bild bleibt.

HTH

Bildwechsel bei Mausklick für Submit-Button

ruebe
Beiträge gesamt: 1113

13. Aug 2004, 12:02
Bewertung:

gelesen: 4204

Beitrag als Lesezeichen
Hallo Markus,

sorry; aber ich versteh nur Bahnhof :)
Gibt es dafür nicht irgendwo ein fertiges Beispiel?


Danke und liebe Grüße
René
---------------------
Es gibt nichts Schöneres, als dem Schweigen eines Dummkopfes zuzuhören.
(Helmut Qualtinger)

Bildwechsel bei Mausklick für Submit-Button

ruebe
Beiträge gesamt: 1113

13. Aug 2004, 18:09
Bewertung:

gelesen: 4204

Beitrag als Lesezeichen
Hallo,

ich habe eine Lösunge gefunden;
und zwar lässt sich soetwas mit den GoLive-Boardmitteln (Aktion-Rollover) ganz einfach bewerkstelligen.

Danke und liebe Grüße
René
---------------------
Es gibt nichts Schöneres, als dem Schweigen eines Dummkopfes zuzuhören.
(Helmut Qualtinger)

Bildwechsel bei Mausklick für Submit-Button

Markus Walker
Beiträge gesamt: 494

13. Aug 2004, 18:28
Bewertung:

gelesen: 4204

Beitrag als Lesezeichen
Schön! Da ich nun selbst ein Beispiel gebastelt habe, hier die Lösung. Dabei wird ein Button mittels Button Element und der andere mit dem Input Element erzeugt:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=iso-8859-1">
<title>PageTitle</title>
<script language="javascript">
function clicked() {
for (var j = 0; j < document.TestForm.Test.length; j++) {
if (document.TestForm.Test[j].checked) {
document.getElementById("submitPic").src = "imageSent.gif";
document.getElementById("submitPic2").src = "imageSent.gif";
return true;
}//if
}//for
return false;
}//function clicked()
</script>
</head>
<body>
<form id="FormName" name="TestForm" action="mailto:test@test.com" method="post" onsubmit="return clicked()">
<input type="checkbox" name="Test" value="A" onclick="radio(this.value)">
<input type="checkbox" name="Test" value="B" onclick="radio(this.value)">
<input type="checkbox" name="Test" value="C" onclick="radio(this.value)">
<button type="submit" name="submitButtonName">
<img id="submitPic" src="imageDefault.gif" alt="Submit Button">
</button>
<input id="submitPic2" type="image" src="imageDefault.gif" alt="Submit Button2">
</form>
</body>
</html>