CSS für "input type=image"

[cougar]

Kann mir jemand helfen bei folgendem Problem ?

Ich möchte via CSS die Grafik beim "Input type=image"
steuern. Geht das überhaupt ? Und wenn ja wie? oder
gibt es andere bessere Möglichkeiten?

Merci für Eure Hilfe.
Cougar

[egal]

Na einfach

input[type=image] {
 margin: 20px;
}

[cougar]

Dank für die schnelle Antwort.

Und wie funktionierts, dass ich mehrere Class haben kann um die jeweils die Grafik zu wechseln ?
Das Hauptproblem, das ich habe, ist, dass ich nicht weiss wie das Image (src=) im CSS zu wechseln.

[Sven Rautenberg]

Moin!

Das Hauptproblem, das ich habe, ist, dass ich nicht weiss wie das Image (src=) im CSS zu wechseln.

_Das_ geht auch nicht.

- Sven Rautenberg

[Avalon]

Das Hauptproblem, das ich habe, ist, dass ich nicht weiss wie das Image (src=) im CSS zu wechseln.

_Das_ geht auch nicht.

Schon wieder falsch, im Mozilla und Kollegen geht es sehrwohl, wenn der Bildwechsel durch einen hover-effekt ausgelöst wird.

Gruß
Avalon

[MudGuard]

Hi,

Das Hauptproblem, das ich habe, ist, dass ich nicht weiss wie das Image (src=) im CSS zu wechseln.
_Das_ geht auch nicht.
Schon wieder falsch, im Mozilla und Kollegen geht es sehrwohl, wenn der Bildwechsel durch einen hover-effekt ausgelöst wird.

Das möchte ich bitte sehen.

Wenn es um ein Hintergrundbild ginge - ja.
Aber ein per src-Attribut im <input type="image"> eingebundenes Bild per CSS wechseln?
Den Code würde ich bitte gerne sehen.

cu,
Andreas

[Avalon]

Das möchte ich bitte sehen.

Wenn es um ein Hintergrundbild ginge - ja.
Aber ein per src-Attribut im <input type="image"> eingebundenes Bild per CSS wechseln?
Den Code würde ich bitte gerne sehen.

No problem:

im CSS:

.classname {-moz-binding:url(../xbl/bindings.xml#normal);}
.classname:hover {-moz-binding:url(../xbl/bindings.xml#hover);}

dann muß es natürlich eine Datei bindings.xml geben mit mindestens folgendem Inhalt:

<?xml version="1.0" encoding="ISO-8859-1"?>
<bindings xmlns="http://www.mozilla.org/xbl"
          xmlns:xul="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"
          xmlns:xhtml="http://www.w3.org/1999/xhtml">

<binding id="normal">

<content>
      <xul:image src="normal.gif"/>
      <children/>
    </content>

</binding>

<binding id="hover">

<content>
      <xul:image src="hover.gif"/>
      <children/>
    </content>

</binding>

</bindings>

falls die HTML-Elemente mit class="classname" keine Kindelemente enthalten, muß das <children/> Element in der xml-Datei entfallen.

Vorteil: Bildwechsel bei deaktiviertem Javascript ist möglich!
Nachteil: Nur im Mozilla - wie bereits gesagt!

Mozilla-user sind eben im Vorteil

mehr zu XBL auf den Seiten des W3C oder bei mozilla.org
http://www.w3.org/TR/xbl/
http://www.mozilla.org/projects/xbl/xbl.htm

Gruß
Avalon

[Avalon]

Entschuldigung, der zweite Link war tot, so geht's besser:

mehr zu XBL auf den Seiten des W3C oder bei mozilla.org
http://www.w3.org/TR/xbl/

http://www.mozilla.org/projects/xbl/xbl.html

Gruß
Avalon

[MudGuard]

Hi,

Das möchte ich bitte sehen.
Wenn es um ein Hintergrundbild ginge - ja.
Aber ein per src-Attribut im <input type="image"> eingebundenes Bild per CSS wechseln?
Den Code würde ich bitte gerne sehen.

No problem:
im CSS:
.classname {-moz-binding:url(../xbl/bindings.xml#normal);}
.classname:hover {-moz-binding:url(../xbl/bindings.xml#hover);}

Aha. Also mit proprietärem nicht-CSS.
Womit Sven also doch recht hatte, daß es _mit CSS_ nicht geht.

cu,
Andreas