Eigene Grafiken bei "Vorschau" und "Absenden"

[Chickeweck]

Hallo zusammen,

ich bin grade dabei mir 'nen eigenen Style für mein Forum zu erstellen, komm auch ganz gut voran, häng aber jetzt ein kleinwenig.

Und zwar würd ich gern statt den Standardbuttons "Vorschau" und "Absenden" eigene Grafiken einfügen, die eben auch diese Submit-Funktion erfüllen.

Die Codestelle die ich (so meine ich) abändern muss ist hier:

Code: Alles auswählen

	<div class="panel bg2">
		<div class="inner"><span class="corners-top"><span></span></span>
		<fieldset class="submit-buttons">
			{S_HIDDEN_ADDRESS_FIELD}
			{S_HIDDEN_FIELDS}
			<!-- IF S_HAS_DRAFTS --><input type="submit" accesskey="d" tabindex="9" name="load" value="{L_LOAD}" class="button2" onclick="load_draft = true;" />&nbsp; <!-- ENDIF -->
			<input type="submit" tabindex="5" name="preview" value="{L_PREVIEW}" class="button1"<!-- IF not S_PRIVMSGS --> onclick="document.getElementById('postform').action += '#preview';"<!-- ENDIF --> />&nbsp;
			<input type="submit" accesskey="s" tabindex="6" name="post" value="{L_SUBMIT}" class="button1" />&nbsp;

		</fieldset>

		<span class="corners-bottom"><span></span></span></div>
	</div>

Wär toll wenn mir jemand helfen könnte.

[Chickeweck]

Soo, ich habs inzwischen hinbekommen dass eine Grafik angezeigt wird und auch die Submit-Funktion erfüllt, nur hätte ich noch gern einen Mouseover-Effekt, will aber nicht so hinhauen, hier das Stück Code:

Code: Alles auswählen

<input type="image" accesskey="s" tabindex="6" src="styles/prosilver/imageset/post_out.png" border="0" width="120"height="25" name="post" onmouseover="post.src='styles/prosilver/imageset/post_on.png';" onmouseout="post.src='styles/prosilver/imageset/post_out.png';" value="{L_SUBMIT}" />&nbsp;

Was stimmt da nicht ?

[modernist]

Soo, ich habs inzwischen hinbekommen dass eine Grafik angezeigt wird und auch die Submit-Funktion erfüllt

Und die Lösung sieht wie aus? Vielleicht wäre die für andere zukünftig von Interesse...

nur hätte ich noch gern einen Mouseover-Effekt, will aber nicht so hinhauen, hier das Stück Code:

Code: Alles auswählen

<input type="image" accesskey="s" tabindex="6" src="styles/prosilver/imageset/post_out.png" border="0" width="120"height="25" name="post" onmouseover="post.src='styles/prosilver/imageset/post_on.png';" onmouseout="post.src='styles/prosilver/imageset/post_out.png';" value="{L_SUBMIT}" />&nbsp;

Was stimmt da nicht ?

Mach das doch mit CSS und hover, dann bekommt man's auch ohne JavaScript zu sehen.

Könnte dann so aussehen.
Im CSS:

Code: Alles auswählen

.bckgr {width: 120px; height: 25px; background: url(styles/prosilver/imageset/post_out.png) top no-repeat; border: 0px; cursor: pointer;}
.bckgr:hover {background: url(styles/prosilver/imageset/post_on.png) top no-repeat; cursor: pointer;}

Im Template

Code: Alles auswählen

<input title="senden" class="bckgr" type="text" name="post" alt="senden" />

Ansonsten fehlt ein Leerzeichen in deinem Code zwischen width="120"height="25" und für XHTML 1.0 strict sind hier weder border, noch width noch height erlaubt.

[Chickeweck]

Vielen Dank für deine Antwort, aber leider will es mit der von dir vorgeschlagenen Lösung nicht funktionieren.

Warum die Submit-Funktion klappt weiss ich offengestanden selbst nicht so genau, ich hab hier etwas nachgelesen und versucht es um den Mouseover-Teil zu erweitern. Der Button wird wie gesagt ordentlich dargestellt und die Submit-Funktion geht auch, möglicherweise wegen dem tabindex="6".

Diese Mouseover-Lösung hab ich schon mehrfach erfolgreich verbaut, nur hier will es irgendwie nicht.

[Chickeweck]

Ich habs endlich hinbekommen

Für alle die in Zukunft ähnliches vorhaben hier meine Lösung:

CSS:

Code: Alles auswählen

#eigener_button{
	height: 25px;
	width: 100px;
	border: none;
	background: url(grafik_adresse) no-repeat;
}

#eigener_button:hover{
	height: 25px;
	width: 100px;
	border: none;
	background: url(grafik_adresse) no-repeat;
}

Template:

Code: Alles auswählen

<input type="submit" name="post" accesskey="s" tabindex="6" id="eigener_button" value=" " />

Value hab ich freigelassen, da sonst noch ein Text über dem Button steht.