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.
Homepage selbermachen 7.852 Themen, 35.619 Beiträge
Versuche mal das:
D.h. ein name ist dafür nicht erforderlich.
mr.escape
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 ?)
Immer wenn ein "<" im quelltext erscheint, muss einfach stattdessen "<" stehen. Das gilt für die normalen tags, aber auch für "kleiner als" in javascript-abschnitten.
mr.escape
Alternativ könntest Du sowas auch per CSS Hintergrund + Hover lösen - das kommt sogar ohne JS aus...
Gruß
Borlander