[CSS]Podmiana obrazka po najechaniu myszką Opcje

[northwest]

Witam serdecznie,
Mam taki formularz:

[HTML] pobierz, plaintext 
<form action="kontakt.html" method="post">
<label>&nbsp;Imię i Nazwisko:</label>
<input type="text" value="" name="imie"/>
<label>&nbsp;Firma:</label>
<input type="text" value="" name="nazwisko"/>
<label>&nbsp;Telefon:</label>
<input type="text" value="" name="telefon"/>
<label>&nbsp;E-mail:</label>
<input type="text" value="" name="kontakt"/>
<label style="position:relative; left:10px; ">
<label>&nbsp;Wiadomość:</label>
<textarea name="tresc" style="position:relative;left:9px; width:421px;height: 207px;top:-3px"></textarea>
<button type="submit" value="" class="zapiszz333"/>
</form>
[HTML] pobierz, plaintext 

i do tego kod CSS:

[HTML] pobierz, plaintext 
button.zapiszz333{
    display: block;
    width: 87px;
    height: 35px;
    background-image: url(images/sender.png); 
    overflow: hidden;
 
    cursor: pointer;
    margin:1px -15px -0px 270px;
}
button.zapiszz333:hover{
    display: block;
    width: 87px;
    height: 35px;
    background-image: url(images/sender.png); 
    overflow: hidden;
     margin-left: -60px;
    cursor: pointer;
    margin:1px -15px -0px 270px;
}
[HTML] pobierz, plaintext 

obrazek wygląda tak:


Chciałbym żeby po najechaniu myszką była widoczna wersja podświetlona napisu,a momencie gdy nie jest - to bez podświetlenia...

Wie ktoś może co robię nie tak??

North

[Sephirus]

Hmm z tego co widzę to po najechaniu ustawiasz ten sam plik graficzny co bez

A jeśli jest to sprite... czyli jeden obrazek z dwoma guzikami to dodaj do :hover coś takiego:

[CSS] pobierz, plaintext 
background-position:top right;
[CSS] pobierz, plaintext 

Ten post edytował Sephirus 14.02.2012, 13:15:23

[Damonsson]

Nie margin-left: -60px

a:

background-image: url(images/sender.png) -60px 0px;

[northwest]

nie działa za bardzo... delikatnie się przesuwa w lewo, ale tak dosłownie o parę pixeli...

zrobiłem coś takiego (prawie działa, teraz lekko obrazek przeskakuje na bok, gdyby bardziej to byłoby ok):

[HTML] pobierz, plaintext 
button.zapiszz333{
    display: block;
    width: 87px;
    height: 35px;
    background-image: url(images/sender.png); 
    overflow: hidden;
 
    cursor: pointer;
    margin:1px -15px -0px 270px;
}
button.zapiszz333:hover{
    display: block;
    width: 87px;
    height: 35px;
    background-image: url(images/sender.png)260px 0px;;
        background-position:top right;
    overflow: hidden;
 
    cursor: pointer;
    margin:1px -15px -0px 270px;
}
[HTML] pobierz, plaintext 

wiecie moze dlaczego?

[crocodillo]

[HTML] pobierz, plaintext 
button.zapiszz333:hover{
    background-position:-60px 0px;
}
[HTML] pobierz, plaintext 

(ps. przy :hover nie musisz powtarzać wszystkich stylów, tylko to co chcesz zmienić)

Ten post edytował crocodillo 14.02.2012, 22:28:11