Przycisk button - jak to wstawić..

[tomierc]

Witam mam taki problem, chcę wstawić przycisk aktywny na zasadzie. Najadę na niego kursorem to zmienia się grafika. Czyli 2 grafiki bez akcji i jak się najdzie to ta 2 - czy ktoś jest w stanie pomóc jak to zrobić?

[gostek_]

<img src="obrazek.png" onmouseover="this.src='obrazekponajechaniumyszka.png';" onmouseout="this.src='obrazek.png';" />

[tomierc]

dziękuje ci za pomoc. Działa bardzo ciekawie

[Łysy!]

Lepszym rozwiązaniem jest przeniesienie tego obrazka do CSS, dzięki czemu zyskujesz nad nim większą kontrolę i działać może szybciej (szczególnie pod operą) jeżeli zastosujesz tzw. "CSS Sprites" - brak widocznego opóźnienia na załadowanie się drugiej grafiki.

Po za tym, dobra praktyka kodowania stron nakazuje, aby nic nie znaczące "upiększenia" przenosić właśnie do CSS.

[tomierc]

nie wiem jak to zrobić

[Łysy!]

Bardzo prosto, tworzysz jedną grafikę zawierającą te 2 stany, innymi słowy łączysz te 2 obrazki w jeden.

Dla przykładu niech to będzie obrazek o łącznych wymiarach 55px na szerokość i 40px na wysokość. Następnie w CSS krótka regułka:

.button {
display: block; /* link jest elementem liniowym, dlatego musimy go przekształcić na blokowy */
width: 55px;
height: 20px;
overflow: hidden; /* dla pewności, że nic nie rozciągnie elementu - przede wszystkim interlinia w IE6 */
background: url(obrazek.gif) 0 0 no-repeat; /* 0 0 to pozycja wyrównana w poziomie i pionie */
}

.button:hover {
background-position: 0 -20px; /* podciągamy obrazek do góry */
}

Jeżeli grafika ma jakiś tekst i chcesz ukryć ten html'owy możesz dopisać jeszcze text-indent: -100px;