Homepage selbermachen 7.852 Themen, 35.619 Beiträge

"onmouseover" auf ein "input" eines Formulars anwenden ?

knibbelmumpf / 4 Antworten / Baumansicht Nickles

Hallo alle zusammen,

ich möchte folgendes Verwirklichen:
Auf einer Webseite will ich ein oder meherer Formulare definieren. Statt eines schöden, rechteckigen, grauen Submit-Buttons möchte ich aber eine Grafik als Submit-Button verwenden.

Das wäre an sich schonmal gar nicht so schwer:
[form ...]
[input type=image name=submitimage src=grafik.gif ...]
[/form]
(Bitte ersetzt eckige Klammern mit spitzen Klammern.
Anführungszeichen und weitere ggf. auch notwendige Angaben habe ich mal weggelassen, um die für den Grafik-Button relevanten Angaben übersichtlich darzustellen.)

Aber: Ich hätte gerne Buttons, die sich beim Drüberfahren mit der Maus verändern.
(Zur Erklärung: Die per default angezeigten Buttons sollen klein und rund sein - wenn man mit der Maus drüberfährt, soll eine größere Grafik mit einem erklärenden Wort angezeigt werden - z.B. "edit")
Mit Grafiken an sich wäre das mittels "onmouseover" und "onmouseout" einfach:
[img src=klein.gif name=bild onmouseover="bild.src='gross.gif';" onmouseout="bild.src='klein.gif;';"/]

LEIDER habe ich noch keinen Weg gefunden, dieses onmouseover und onmouseout auf ein [input]-Element anzuwenden.
Wenn ich etwas wie
[input type=image name=submitimage src=klein.gif onmouseover="submitimage.src='gross.gif';" onmouseout="submitimage.src='klein.gif;';"]
konstruiere, dann bekomme ich leider folgenden Fehler beim Aufruf der Seite:
Fehler: 'submitimage' ist undefiniert

Kann mir jemand eine Lösung aufzeigen, mit der ich verwirklichen kann, was ich hier beschrieben habe ?
Danke !

Gruß knibbelmumpf

Ach so: Kleine Ergänzung:
Das Forumlar muß auch funktionieren, wenn der Anwender JavaScript disabled hat.
Ich denke, bei einer "onmouseover-Lösung" wird, wenn der User javascript disabled hat, der Wechsel zur größeren Grafik nicht funktionieren. Darauf müssen dann die 10%, die JavaScript disabled haben, verzichten. Aber das Abschicken des Formulars soll eben auf jeden Fall funktionieren.

bei Antwort benachrichtigen
mr.escape knibbelmumpf „"onmouseover" auf ein "input" eines Formulars anwenden ?“
Optionen

Versuche mal das:

http://www.nickles.de/lib/nav_small_overlapping_03.png" onmouseover="
this.src='http://www.nickles.de/elem/magic50x50/nickles.gif';" onmouseout="this.src='" target="_blank" rel="nofollow">http://www.nickles.de/lib/nav_small_overlapping_03.png';">
D.h. ein name ist dafür nicht erforderlich.



mr.escape
"The man who trades freedom for security does not deserve nor will he ever receive either." - Benjamin Franklin"Wer seine Freiheit aufgibt, um Sicherheit zu erreichen, wird beides verlieren." - Georg Christoph Lichtenberg
bei Antwort benachrichtigen
knibbelmumpf mr.escape „Versuche mal das: D.h. ein name ist dafür nicht erforderlich. mr.escape“
Optionen

Cool !

Es funktioniert ! Danke, mr.escape !!!

Gruß knibbelmumpf

Derweil habe ich auch eine Variante zum Laufen bekommen - die ist allerdings nicht so elegant wie die von mr.escape:

[script language="JavaScript"]
function gross() { document.getElementById("btn3").src="gross.gif"; }
function klein() { document.getElementById("btn3").src="klein.gif"; }
[/script]

[form]
[input type="image" src="klein.gif" id="btn3" onmouseover="gross()" onmouseout="klein()"]
[/form]


(wie gesagt bitte eckige durch spitze Klammern ersetzen)
(wie kriegen es andere hier eigentlich hin, quelltexte zu posten, ohne dass sie interpretiert werden ?)

bei Antwort benachrichtigen
mr.escape knibbelmumpf „Cool ! Es funktioniert ! Danke, mr.escape !!! Gruß knibbelmumpf Derweil habe...“
Optionen
wie kriegen es andere hier eigentlich hin, quelltexte zu posten, ohne dass sie interpretiert werden ?
Immer wenn ein "<" im quelltext erscheint, muss einfach stattdessen "&lt;" stehen. Das gilt für die normalen tags, aber auch für "kleiner als" in javascript-abschnitten.

mr.escape
"The man who trades freedom for security does not deserve nor will he ever receive either." - Benjamin Franklin"Wer seine Freiheit aufgibt, um Sicherheit zu erreichen, wird beides verlieren." - Georg Christoph Lichtenberg
bei Antwort benachrichtigen
Borlander knibbelmumpf „"onmouseover" auf ein "input" eines Formulars anwenden ?“
Optionen

Alternativ könntest Du sowas auch per CSS Hintergrund + Hover lösen - das kommt sogar ohne JS aus...

Gruß
Borlander

bei Antwort benachrichtigen