Cześć wszystkim. Jestem kompletny zieloniak do takiego stopnia, że nawet nie wiedziałem jak nazwać ten temat. Dlatego proszę o wyrozumiałość. Nie wiem nawet czy to o co pytam tyczy się PHP czy jest to Java, w każdym razie jako tag zaznaczyłem to pierwsze. Mam ideę i szukam odpowiedzi na pytanie by tę ideę zrelizować.

Chcę utworzyć przycisk który będzie zamieszczony na stronie i po kliknięciu będzie odsyłał do innej strony, ale nie ma to być zwykły przycisk bo ma się zachowywać w następujący sposób.

1) Jest sobie przycisk, jakby nigdy nic.



2) Najeżdza użytkownik strzałką i obrazek się podświetla, zmienia kolor...



3) ...a po kliknięciu zmienił wygląd kompletnie, do tego stopnia że nie przypomina tego z podpunktu 1 i 2
o tak np.


Tak ma to wyglądać w uproszczonym przykładzie, bo dodatkowo mam zamiar zmieniac nie tylko kolor ale grafikę zamieszczoną w buttonie, a może nawet jakieś obramowanie etc. sam nie wiem. Chcę by był jak najlepszy efekt.

Jakieś sugestie, pomysły? Nie chodzi tutaj nawet o klepanie przez Was kodu etc.
Grafikę jestem w stanie zrobić sobie samemu. Potrzebuję jedynie informacji i fachowych określeń co gdzie szukać, czym się zainteresować itd. Tak abym po przeanalizowaniu treści w miarę bezproblemowo przy odrobienie prób i błędów był w stanie w dośc szybkim czasie osiągnąć pożądany efekt.
Dziękuję za przeczytanie wątku i czekam z niecierpliwością na odpowiedź.

Użyj w CSS :hover na podpunkt 2, a na podpunkt 3 np. jQuery i zdarzenie click

css

Pod warunkiem, że to będzie <a></a>

Cóż, wydało mi się to oczywiste.
Tak czy siak, kolega ma sporo nauki, jeśli chce spełniać sam swoje zachcianki. To tylko wskazówki gdzie szukać

Dzięki wielkie.
To znaczy wiecie. Nie chciałem Was zarzucać problemami i na krzywego wchodzić i czekać aż ktoś da mi na tacy cały kod, ale nie obrażę się jeśli będziecie chcięli się podzielić szerszą wiedzą. Nie mam ambicji być koderem, ale muszę sobie stworzyć takie buttony i tyle
Jutro przetestuję. Tym czasem ja lecę i pozdrawiam.

Ciężko jest w poście na forum tłumaczyć humaniście różniczkowanie. Poczytaj o tym, co Ci podaliśmy i wróć z konkretnymi pytaniami, to na pewno znajdą się odpowiedzi.
Pozdrawiam.
Andrzej.

Czy chodziło o coś takiego: http://jsfiddle.net/teTBf/ ?

OK Panowie. Zaznajomiłem się trochę z tematem i zamieszczone przez Was treści pomimo że są zdawkowe nakierowały mnie na pewne stronki i dziękuję Wam za to... ale to wciąż nie to. Przypuszczam że jeśli chcę osiągnąć taki efekt jaki chcę nie wystarczy się ograniczyć jedynie do samego kodu przedstawiającego Button z tekstem w środku, tylko będzie potrzebne wykorzystanie plików graficznych tak jak wcześniej napisałem. A tutoriale które odnalazłem w sieci "oferują" wiedzę ograniczoną jedynie do kodu bez wykorzystania grafiki zewnętrznej.
Jakby ktoś zrozumiał to co napisałem, miał wolną chwilę i wiedzę to niech wrzuci jakiś odnośnik do tutoriala który może mi pomóc. Tymczasem ja robię nadal research na własną rękę.
Pozdro i do kolejnego "przeczytania"

Coś takiego: http://jsfiddle.net/teTBf/1/ ? Bo ja już przestałem czaić, o co w ogóle Ci chodzi. Tutaj masz wykorzystane pliki graficzne. A jeżeli nie chodzi Ci o button, to masz na DIV'ach: http://jsfiddle.net/teTBf/2/ . Czy takie coś odpowiada?

Wyjaśnij dokładnie o co Ci chodzi, to zrobię Ci przykład i wytłumaczę krok po kroku. :-)

Rzeczywiście zakręciłem, ale @in5ane poszedł dobrym tropem.
Chodzi o to że można zrobić button na kilka sposobów jedynie dzięki kodowi jak tu: http://www.cssbuttongenerator.com/ bez wykorzystania plików graficznych, a więc bez większych fajerwerków jedynie z tekstem w środku.

A mi chodzi o to że na jeden przycisk mają być wykorzystane 3 pliki w .png
1) przed kliknięciem 2) z kursorem nad obrazkiem i 3) po kliknięciu. No i żeby efekt był taki żeby przenosiło pod inny adres.

Czyli np.
Pierwszy obrazek (normalny) przedstawia miniaturę zdjęcia jakiejś osoby (np. o nazwie obrazek.png), jak najedziesz na zdjęcie kursorem to zmienia się nieznacznie tło za tą twarzą (podswietlonyobrazek.png) i trzeci obrazek już po kliknięciu np. ze znaczkiem O.K albo uśmiechnięta buzią (obrazekpokliknieciu.png).

O to chodzi.
Dodatkowo chciałbym dodać do tego zliczanie oddanych głosów z jednego IP dziennie, ale to już do dalszego researchu. Jakbyś miał chęć możesz pomóc, tymczasem idę metodą prób i błędów porobić jakieś testy na podstawie tego co @in5ane napisał.


aktualizacja: 24 maja

To znowu ja. Zgodnie z moimi przewidywaniami na samym początku błędnie nazwałem temat bo nie chodziło stricte o button tylko o obrazek no i dodatkowo tagi musiały być skorygowane przez moderatora.

Chodziło o wykorzystanie 3 obrazków:

przed kliknięciem:

podświetlony po najechaniu:

po kliknięciu:

Wyszło mi takie coś: http://jsfiddle.net/danten1/GM4Mu/

Jakieś sugestie? Bo napewno coś popieprzyłem.

Następne na liście to ukrycie linka (w tym wypadku akurat do forum.php.pl) chyba potrzebny będzie jakiś skrypt? Jakieś sugestie?
Tymczasem lecę pogłębiać wiedzę w tej materii samemu.

Trochę zapomniałem o tym topicu.

Rozwiązanie: http://jsfiddle.net/jepek/JcjL8/

Kombinowałeś bardzo słusznie. Zabrakło Ci jednak trochę wiedzy. Jak widzisz wystarczy sam link. Poczytaj o elementach blokowych i liniowych i ich właściwościach w CSS - dzięki temu będziesz mógł ładnie stylować elementy liniowe jako blokowe i odwrotnie.

Dziękuję, poczytam napewno.
Mam jeszcze taki problem. Jak napisałem wcześniej, chciałbym ukryć link spod tego obrazka oraz zliczać kliknięcia. Trafiłem na ten wątek: http://forum.php.pl/index.php?showtopic=61281, ale kompletnie nie czaję o co chodzi.
Jak mógłbym to wszystko zaadaptować na zwykłej podstronie?
Sprawa wydaje się wizualnie niby prosta, ale po drugiej stronie kryją się takie cuda że mała głowa.

Licznik ma być oparty na plikach czy na bazie danych mysql? ;-))
Napisz na czym się zatrzymujesz

Wiecie może jak do tego http://jsfiddle.net/teTBf/2/ wrzucić odnośnik, żeby przerzucało do jakiejś strony? Najlepiej z target="_blank"

Korzystałem z tego http://jsfiddle.net/jepek/JcjL8/ ale jak widać tag jest pusty i przy wklejaniu tego kodu w edytorze, ckeditor wyrzuca kod. To znaczy zmiany na stronie zachodzą, ale przy edycji podstrony nie ma kodu. Mogę dać w tag jakiś napis ale wtedy wyświetla i tekst i obrazek, a to trochę bez sensu. Jakieś rozwiązania?

http://jsfiddle.net/teTBf/7/