[ERLEDIGT] Mouseover Button (Grafik) Als Formular-Sendebutton?

[ps2freak]

Hallo, ich möchte statt des normalen submit Buttons einen eigenen Button erstellen, sprich eine Grafik.
Dies ist ja auch nicht weiter schwer (input type="image"), nur möchte ich den Button an mein Design anpassen, sodass er unbedingt auch eine Mouseover-Button sein soll.
Mein html-Code dazu sieht momentan so aus (hab etwas rumprobiert, aber nichts hat das gewünschte Ergebnis geliefert):

<a href="#" onmouseover="Bildwechsel(1, mouseover2)" onmouseout="Bildwechsel(1, mouseout2)" onklick="submit();"><input type="image" src="submitnorm.png" alt="Auswahl bestätigen">
</a>

Dass das so nicht funktionieren wird hab ich mir zwar schon gedacht, aber ausprobieren schadet ja nicht ;)
Falls ihr noch den relevanten Teil des Javascript Codes braucht:

[...]
mouseout2 = new Image();
mouseout2.src = "submitnorm.png";
mouseover2 = new Image();
mouseover2.src = "submitmouseo.png";
[...]
function Bildwechsel (Bildnr, Bildobjekt) {
  window.document.images[Bildnr].src = Bildobjekt.src;
}

Wobei die [...] für nicht relevanten Javascript Code stehen (es sind halt noch mehr Mouseover Buttons darin...).


Ich hoffe ihr könnt mein Problem nachvollziehen und mir helfen ;)
MfG.

 

[Max T.]

Wie wäre es damit, einen Button zu erstellen, und per CSS ein background-image zuzuweisen, welches sich beim hovern ändert? Oder das Ganze so ähnlich verpacken: SELFHTML: HTML/XHTML / Formulare / Klick-Buttons . Wäre meine Idee.
VG

 

[Space Vampire]

warum type="image"?

<input type="submit" name="submit_1" class="submit_1" value="">

CSS:

.submit_1{
	height: 10px;
	width: 100px;
	background-image:url("bild_1.jpg");
}

.submit_1:hover{
	background-image:url("bild_2.jpg");
}

 

[ps2freak]

Das ist dann aber nicht wirklich an mein Design angepasst...
Erzeigt das ja trotzdem noch als grauen Button an!
Abgesehen davon scheint das mit dem Mouseover nicht zu funktionieren, jedenfalls passiert nichts wenn ich mit dem Cursor über den Button fahre...
So siehts aus:

Wie man sieht ist der Hintergrund grün. Die Buttons - sprich Bilder - sind erst transparent mit der Bechriftung drinne und beim Mouseover soll der Hintergrund dunkelgrün werden (etwas dunkler als der Hintergrund). Das ist ja auch alles kein Problem, denn wie gesagt nen einfachen Mouseover-Button krieg ich ja hin, aber eben keinen für den submit...
Also nochmal: Es sollen als Button wirklich nur meine Grafiken (mit Mouseover-Effekt) angezeigt werden - und nix mit grauen Buttons!
Danke dennoch!


MfG.

Edit: Fehler im Code, beim .submit:hover mussnatürlich auch .submit_1:hover stehen ;) jetzt funzt wenigstens schonmal das Mouseover!

Nochmal Edit:
Wenn ich das so mache:

    <style>	.submit_1{	height: 40px;	width: 140px;	background-image:url("../images/system/head-menu-bar/auswahlbestaetigen-a.png");}
.submit_1:hover{	background-image:url("../images/system/head-menu-bar/auswahlbestaetigen-b.png");}	.reset_1{	height: 40px;	width: 122px;	background-image:url("../images/system/head-menu-bar/auswahlloeschen-a.png");}
.reset_1:hover{	background-image:url("../images/system/head-menu-bar/auswahlloeschen-b.png");}</style>   <input type="image" src="../images/system/head-menu-bar/auswahlbestaetigen-a.png" name="submit_1" class="submit_1" value="">   <input type="image" src"../images/system/head-menu-bar/auswahlloeschen-a.png" name="reset_1" class="reset_1" value="">

Dann funzt zwar der Abesenden Button tadellos, aber der reset-Button nicht - ist ja auch irgendwie klar, kann man irgendwo noch zusätzlich jetzt sagen, was welcher Button machen soll?
Hier nochmal n aktueller Screenshot:

Wie gesagt, Mouseover funzt bei beiden, die falsche darstellung des reset-Buttons liegt wohl daran, dass er nicht weiss was das für n Button sein soll!(?)

 

[Space Vampire]

CSS ist nicht deine Stärke oder?
Ergänze submit_1 mit

	background-color:transparent;
	border:none;

Das einzige, auf das du achten musst, ist, dass die Dimensionen des Buttons groß genug sind, damit sie das Hintergrundbild nicht abschneiden.

Ebenfalls Edit:
Die entstandene Frage hat nun endgültig nichts mehr mit HTML zu tun, nachdem es bisher schon grenzwertig war. Ich empfehle eine entsprechende Anfrage im Javascript-Unterforum. DAS ist nämlich nicht MEINE stärke ;)

 

[Tronjer]

Was soll der Reset-Button denn tun? Auswahl löschen ist im Kontext der Fragestellung nicht aussagekräftig?

 

[ps2freak]

CSS ist nicht deine Stärke oder?

Naja, bin jetzt nun auch nicht wirklich soo schlecht darin, hab nur in dem Moment nicht drangedacht, bzw. war mir nicht ganz im Klaren darüber, dass das an der Stelle funktionieren könnte... Jetzt erscheint es mir aber logisch.

Das einzige, auf das du achten musst, ist, dass die Dimensionen des Buttons groß genug sind, damit sie das Hintergrundbild nicht abschneiden.

Ja, darauf hab ich schon geachtet, soviel versteh ich dann doch von CSS ;)

Die entstandene Frage hat nun endgültig nichts mehr mit HTML zu tun, nachdem es bisher schon grenzwertig war. Ich empfehle eine entsprechende Anfrage im Javascript-Unterforum.

Ja, war mir erst nicht sicher, wo ich meine Frage stellen sollte, aber es hat sich jetzt eh erledigt, dank deinem Vorschlag mit dem border:none; etc.

DAS ist nämlich nicht MEINE stärke ;)

versteh ich völlig hast mir ja aber trotzdem gut geholfen :)


Danke nochmal und MfG.