Nie działający button, HELP.

[jakub82]

Witam, zdecydowałem się napisać na forum ponieważ nie mogę sobie dać rady z poniższym problemem.

Docelowo ma to być button który po najechaniu myszą zmienia kolor tła i po kliknięciu odsyła na inną strone, podstronę - wiadomo o co chodzi.

Poniższe obrazki ilustrują efekt jaki bym chciał osiągnąć, przed najechaniem myszy (niebieski) i po najechaniu (czarny).





Próbowałem zrobić to na dwa sposoby i poległem.

W obu przypadkach po najechaniu myszą nie zamienia się cały obrazek tylko część za tekstem. Kombinowałem na wiele sposobów i nic.

W plikach txt umieściłem kody.

  1.txt (Rozmiar: 955 bajtów / Pobrań: 3)
  2.txt (Rozmiar: 874 bajtów / Pobrań: 3)

Jak by ktoś zerknął i pomógł to był bym wdzięczny.
Pozdrawiam.

[n0xx]

po co tabeli to wrzucasz i po co w tabeli dajesz tlo takie jak button ?
przeciez to sa podstawy to jak ty chcesz strone zbudowac

<a href>to jest odnosnik</a>

a {
text-decoration: none;
display:block;
overflow:hidden
background-image: url(http://www.toya.net.pl/~jakub_82/images/1.png) left top no-repeat;
font-family: Verdana, Geneva, sans-serif;
font-size: 13px;
color: #FFF;
padding-left: 10px;
}

a:hover{
text-decoration: none;
background-image: url(http://www.toya.net.pl/~jakub_82/images/1h.png) left top no-repeat;
}

[Kartofelek]

Nope!

Zamiast 2 obrazków robisz jeden. Oba stany jeden pod drugim. Potem ustawiasz:

background:url(.......) left top no-repeat;

i dla hover:

background:url(.......) left bottom no-repeat;

Zwróć uwagę na pozycje po url. Ale to są właśnie podstawy więc zapraszamy do google -> css background

[Ancik]

Ta jest jeżeli dalej nie rozumiesz to google -> css sprites.

[n0xx]

czy w 1dnym czy w 2ch, wielkiej różnicy to nie robi

[jakub82]

Dopiero zaczynam zabawe z CSS więc nie wygląda to profesjonalnie, działałem na tabelkach bo przerabiałem szablon do allegro a tam nie działa dużo funkcji.
Pokombinuje z tym co napisaliście. A jak możecie klepnąć całościowy kod to będę mądrzejszy. Proszę o wyrozumiałość, każdy był kiedyś świeżakiem.

[Ancik]

czy w 1dnym czy w 2ch, wielkiej różnicy to nie robi

Robi i to sporą.

[n0xx]

no to napisz jaką, ż chęcią się dowiem

[jakub82]

Pany, proszę o fatygę i zmodyfikujcie któryś z moich kodów i wklejcie, albo stwórzcie nowy ja sobie rozkminię gdzie jest błąd i wyciągne wnioski. Ja wiem że google jest bardzo mądre przepatrzyłem dział "CSS Background" ale jeszcze nie wpadłem na pomysł jak działa podmiana obrazków a na wierzchu jest wyśrodkowany tekst.

[Ancik]

Cały obrazek wczytywany jest tylko raz, potem element jest jedynie podmieniany. To sprowadza się do mniejszej liczby zapytań do serwera, a to z kolei do szybszego ładowania grafiki (nie ścina się przy najeżdżaniu mychą).