✔ Formularabfrage-Problem bei Imagebutton

[kirowatti]

Hallo Leute,
ich habe ein dummes Problem!
Für ein Kontaktformular habe ich eine Abfrageroutine für das Ausfüllen des Name- und E-Mail-Feldes erstellt.
Alles klappt einwandfrei, wenn ich den Standard-Senden-Button verwende (input type="button") aber wenn ich ein eigenes Bild als Schaltfläche verwende (input type="image") wird zwar bei Nichtausfüllen des Pflichtfeldes das Überprüfen-Popup angezeigt, dann aber jedoch trotz weiter auf die Danke-Seite weitergeleitet.
Kann man das verhindern?

Hier mein Button-Script (Sobald ich "image" in "button" austausche, klappt alles, aber natürlich ist dann mein Bild futsch...):

<input type="image" src="images.gif" name="abschicken" value="Senden" onClick="checkForm();" />

Jede Hilfe wäre toll...
Vielen Dank im Voraus

Kirowatti:suspekt:

 

[Maik]

Und wenn du stattdessen das Bild mittels CSS als Hintergrund für den Button (type=button) definierst?

 

[kirowatti]

Hallo michaelsinterface,

toll, dass Du antwortest, aber ich verstehe nicht ganz, wie ich ein Bild als Hintergrund eines Buttons verwenden soll?
Entweder definiere ich doch ein eigenes image oder ich habe die Windows-Formular-Schaltfläche.
Oder was gäbe es da noch für Möglichkeiten?

 

[Maik]

Die Formatierungssprache CSS bietet mit der background-Eigenschaft die Möglichkeit, einem Element einen Hintergrund zuzuweisen. Dies kann dann eine Hintergrundfarbe oder ein Hintergrundbild sein.

Hier ein Beispiel für solch eine Formatierung des input-Elements:

/* Button mit fixer Breite */
input.bgImage {
width: 100px; /* entspricht der Grafikbreite */
height: 25px; /* entspricht der Grafikhöhe */
background: url(pfad/zur/grafik.jpg) no-repeat; /* Hintergrundbild nicht wiederholen */
}

/* Button mit variabler Breite */
input.bgImage {
height: 25px; /* entspricht der Grafikhöhe */ 
background: url(pfad/zur/grafik.jpg) repeat-x; /* Hintergrundbild horizontal wiederholen */
}

Der Aufruf der CSS-Klasse .bgImage erfolgt mit dem class-Attribut:

<input type="button" class="bgImage" name="abschicken" value="Senden" onclick="checkForm();" />

 

[kirowatti]

Tausend Dank,
so funktioniert es nun doch endlich.
Auf so etwas wäre ich nie gekommen, bin auch nicht der css-profi...

Ich hätte da nur noch eine kleine Frage:
Ist es eventuell möglich im css den Curser beim Rollover über diesen Button zu verändern, so wie bei einem normalen Link?

Kirowatti

 

[Maik]

Auch das ist möglich, mit der cursor-Eigenschaft:

cursor: pointer;

Das Thema wandert dann mal rüber ins CSS-Board.

 

[kirowatti]

jetzt bin ich wirklich wunschlos glücklich!
vielen, vielen dank für die hilfe..........