2 Bilder statt Button
lima-city → Forum → Die eigene Homepage → HTML, CSS & Javascript
angeben
befehl
bild
browser
button
code
element
ersetzen
formular
frage
funktionieren
glauben
haut
image
input
klappen
minimaler code
opus
sagen
voll langer code
-
Hallo Leute,
ich hab mir ein Formular erstellt und es haut alles hin. Jetzt bin ich grad beim durchformatieren des Formulars mit Hilfe von CSS. Ich möchte den normalen input button durch bilder ersetzen. Bis jetzt ist es mir genungen den Button durch ein gif zu ersetzen doch kann ich kein 2. Bild angeben das angezeigt wird wenn ich auf den Button klicke.
bei einen link geht es mit:
a.newskleinlinks:active { font-weight:bold; color:#99291F; text-decoration:none;}
doch bei dem input button hab ich das nicht hinbekommen... -
Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!
lima-city: Gratis werbefreier Webspace für deine eigene Homepage
-
Welchen Browser verwendest du?
Der IE (zumindest bis Version 6) unterstützt den :active Befehl nur bei <a> Elementen.
Auch Opera unterstützte :active nicht bei allen Elementen. Bei versionen größer als 7
sollte es bei Opera aber funktionieren.
Wie sieht denn der Befehl zum Bildersetzen bei dir aus?
Per background-image? -
ja habs mittes background-image versucht und hat bei keinem browser funktioniert!
Bei links gehts so einfach, aber die input felder lassen das nicht zu...
hab zwar eine seite gefunden wo sowas mittes css+javascript realisiert ist, aber das ist ein voll langer code und funztaauch nicht bei allen browsern, vor allem nicht beim ie. Der aber immernoch der wichtigse ist, find ich.
-
Ich persönlich liefere meine Seite als application/xhtml+xml aus.
D.h. der IE zeigt sie meines Wissens garnicht erst an - er will sie runterladen.
Sämtliche anderen \"wichtigen\" Browser funktionieren.
Ich habe bei mir dein Beispiel mal getestet, bzw. so umgesetzt, wie ich mir das dachte:
Minimaler Code mit 2 Testbildern.<html> <head> <style type=\"text/css\"> .subm { background-image: url(\'test.jpg\'); } .subm:active { background-image: url(\'test2.jpg\'); } </style> </head> <body> <form> <input type=\"text\" /> <input class=\"subm\" type=\"submit\" /> </form> </body> </html>
Funktioniert bei mir Problemlos...
EDIT: Getestet mit Firefox 3
Beitrag geändert: 4.8.2008 16:56:06 von retr0virus -
retr0virus hast recht so gehts ja wirklich, hab irgendwo nen tippfehler drinn ghabt.
danke bis aufn ie hauts überall hin, hover effekt geht auch dann schauts noch besser aus... -
raubritta schrieb:
ich glaube, ich habe deine Frage nicht richtig verstanden.
Zu dem Titel würde ich sagen:
<input type=\\\'image\\\' src=\\\'dein/link.jpg\\\' onclick=\\\'change_button()\\\'></input>
...
meinst du sowas?
wenn du schon was hast: bitte code mitgeben. Was ellenlanges brauchst du nicht...
hört sich auch recht gut an, was würdest in die js funktion change_button() schreiben??
Beitrag geändert: 4.8.2008 17:38:20 von finch -
ich hatte gehofft, dass würdest du mich nicht fragen. Ich könnte es nämlich nicht auswendig. Naja, muss ich mal schauen, wie ichs machen würde:
Tauschbild01b = new Image();
Tauschbild01b.src = \"opa.jpg\"; /* Highlight-Grafik */
<script type=\"text/javscript\">
function change_button()
{
img.src = \"dein/neuerlink.jpg\";
}
</script>
(ich habe leider gerade keine Zeit es auszuprobieren. Sollte aber klappen -
Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!
lima-city: Gratis werbefreier Webspace für deine eigene Homepage
