[CSS] Mouseover bei Formularbutton

[bodo2005]

Würde momentan gerne mal einen so genannten Roll-Over Effekt für ein Formularbutton nutzen.
Habe hier schon geschaut: http://aktuell.de.selfhtml.org/artikel/css/mouseover/
aber ist nix dabei.

Hat jemand eine Idee, wie ich dies realisieren kann???

 

[m i s s y]

http://www.css4you.de/trickkiste/tr00016.html

schau mal da, vielleicht is das was für dich

 

[bodo2005]

Sorry, hatte vergessen zu erwähnen, dass der Button ein Bild ist, aber dürfte doch damit auch funktionieren, oder?

 

[m i s s y]

joa, gibst dann nen background-image mit an

 

[bodo2005]

Danke, aber ich möchte ja nicht, dass das Image als Hintergrund gewählt wird vom Button, sondern es soll den Button selbst darstellen:

<input type="image" src="{IMG}login.jpg" name="login">

Irgendwie bekomm ich das nicht hin... hast du ne eine zündende Idee für mich!?

 

[mh1001]

Hallo,

du kannst als Button einen normalen Link benutzen, welchen du per CSS mit einem Hintergrundbild und einem Rollover-Effekt versiehst.
Dann kannst du diesen Beispielsweise per JavaScript-onclick-Event die ensprechenden Eigenschaften zuweisen.
Für ein Submit-Button könnte das dann zum Beispiel so aussehen:

document.getElementById("formularid").submit(); return false;

MfG mh1001

 

[bodo2005]

Danke!

Habe jetzt folgendes versucht:

a.my_button, a.my_button:visited, input.my_button { 
    background-image: url(../img/login.jpg); 

    height: 20px; 
    width: 44px;
} 

a:hover, a:active, a:focus, input.my_button:hover, input.my_button:focus { 
    background-image: url(../img/login2.jpg);
}

Allerdings wird dann der Rollover-Effekt und das Ausgangsbild nur in Opera sehr gut dargestellt, in Firefox werden mir Button-Ränder angezeigt und IE kanns gar nicht darstellen, woran kann das liegen???

 

[mh1001]

Dies hat den Grund, dass einige Browser leider einen solchen CSS-Code nicht korrekt interpretieren.
Du kannst das Problem ganz einfach umgehen, indem du die beiden Bilder zu einem Bild zusammenscheidest und dieses dann für den Rollover-Effekt mittels des CSS-Attributs "background-position" entsprechend verschiebst.

Bezüglich der "Button-Ränder" gehe ich davon aus, dass du den Rahmen um das Bild meinst. Dies kannst du mit "border-width: 0;" umgehen.

MfG mh1001

 

[bodo2005]

Danke, habs jetzt mal so probiert:

input.my_button { 
    background-image: url(../img/login3.jpg); 
    

    height: 20px; 
    width: 44px;
		background-position:0px;
} 

input.my_button:hover, input.my_button:focus { 
    background-image: url(../img/login3.jpg); 
    

    height: 20px; 
    width: 44px;
		background-position:44px;
}

Leider gleiches Ergebnis. Wie ist es möglich, dass ich das Bild bei einem "Drückerfahren" verschiebe, habs ja probiert siehe Code.
Könnte mir da mal jemand bitte helfen???

 

[ZeroFlash]

das wäre das so genannte sliding door prinzip... legst halt in einer datei beide buttons entweder untereinander oder nebeneinander an, hier bsp für nebeneinander, so dass die grafik dann 88 px breit sein sollte

.button a, button a:hover, button a:active {
  width:44px;
  height:20px;
  position:absolute;
  display:block;
	}
.button a {
   background:url(button.gif) 0 0 no-repeat;
   }
.button a:hover, .button a:active {
   background:url(button.gif) -44px 0px no-repeat;
   }