[JavaScript][CSS]Fajny Button, :) Opcje

[prantan]

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.
(IMG:http://s24.postimg.org/np2qpog6d/image.jpg)


2) Najeżdza użytkownik strzałką i obrazek się podświetla, zmienia kolor...
(IMG:http://s11.postimg.org/gp8caya5b/image.jpg)


3) ...a po kliknięciu zmienił wygląd kompletnie, do tego stopnia że nie przypomina tego z podpunktu 1 i 2
o tak np.
(IMG:http://s18.postimg.org/k75be9e2t/image.jpg)

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ź.

Ten post edytował Daiquiri 17.05.2013, 06:26:05

Powód edycji: [Daiquiri]: Poprawiam tag ;-)

[prantan]

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: (IMG:http://s9.postimg.org/ffu1qvayj/vor_vote.png)

podświetlony po najechaniu: (IMG:http://s15.postimg.org/ozos0nrlj/kursor_vote.png)

po kliknięciu: (IMG:http://s22.postimg.org/5vmuz5f0d/nach_vote.png)

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.

Ten post edytował prantan 24.05.2013, 15:29:52