Seite 1 von 1
Eigene Grafiken bei "Vorschau" und "Absenden"
Verfasst: 18.06.2009 17:41
von 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;" /> <!-- ENDIF -->
<input type="submit" tabindex="5" name="preview" value="{L_PREVIEW}" class="button1"<!-- IF not S_PRIVMSGS --> onclick="document.getElementById('postform').action += '#preview';"<!-- ENDIF --> />
<input type="submit" accesskey="s" tabindex="6" name="post" value="{L_SUBMIT}" class="button1" />
</fieldset>
<span class="corners-bottom"><span></span></span></div>
</div>
Wär toll wenn mir jemand helfen könnte.
Re: Eigene Grafiken bei "Vorschau" und "Absenden"
Verfasst: 18.06.2009 22:21
von 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}" />
Was stimmt da nicht ?
Re: Eigene Grafiken bei "Vorschau" und "Absenden"
Verfasst: 19.06.2009 00:21
von modernist
Chickeweck hat geschrieben: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...
Chickeweck hat geschrieben: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}" />
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.
Re: Eigene Grafiken bei "Vorschau" und "Absenden"
Verfasst: 19.06.2009 01:33
von 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.
Re: Eigene Grafiken bei "Vorschau" und "Absenden"
Verfasst: 19.06.2009 13:01
von 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.