[CSS] Mouseover bei Formularbutton

Sorry, hatte vergessen zu erwähnen, dass der Button ein Bild ist, aber dürfte doch damit auch funktionieren, oder?
 
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!? :)
 
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:
Code:
document.getElementById("formularid").submit(); return false;
MfG mh1001
 
Danke!

Habe jetzt folgendes versucht:
Code:
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???
 
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
 
Danke, habs jetzt mal so probiert:
Code:
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??? :)
 
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

HTML:
.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;
   }
 
Zurück
Oben