+- Forum Webmastera, HTML, CSS, PHP, MySQL, Hosting, Domeny - Forum dla Webmasterów (https://www.webmastertalk.pl)
+-- Dział: Technologie internetowe - tworzenie stron WWW (https://www.webmastertalk.pl/forum-technologie-internetowe-tworzenie-stron-www)
+--- Dział: Początkujący webmaster (https://www.webmastertalk.pl/forum-poczatkujacy-webmaster)
+--- Wątek: Nie działający button, HELP. (/thread-nie-dzialajacy-button-help)
Strony:
1
2
Nie działający button, HELP. - jakub82 - 12-01-2012
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).
![[Obrazek: F1.jpg]](http://www.toya.net.pl/~jakub_82/images/F1.jpg)
![[Obrazek: F2.jpg]](http://www.toya.net.pl/~jakub_82/images/F2.jpg)
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.
RE: Nie działający button, HELP. - n0xx - 12-01-2012
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;
}
RE: Nie działający button, HELP. - Kartofelek - 12-01-2012
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
RE: Nie działający button, HELP. - Ancik - 12-01-2012
Ta jest
jeżeli dalej nie rozumiesz to google -> css sprites.
RE: Nie działający button, HELP. - n0xx - 12-01-2012
czy w 1dnym czy w 2ch, wielkiej różnicy to nie robi
RE: Nie działający button, HELP. - jakub82 - 12-01-2012
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.
RE: Nie działający button, HELP. - Ancik - 12-01-2012
Cytat:czy w 1dnym czy w 2ch, wielkiej różnicy to nie robi
Robi i to sporą.
RE: Nie działający button, HELP. - n0xx - 12-01-2012
no to napisz jaką, ż chęcią się dowiem
RE: Nie działający button, HELP. - jakub82 - 12-01-2012
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.
RE: Nie działający button, HELP. - Ancik - 12-01-2012
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ą).