Witaj Gościu! ( Zaloguj | Rejestruj )

Forum PHP.pl

 
Reply to this topicStart new topic
> [JavaScript][CSS]Fajny Button, :)
prantan
post 16.05.2013, 21:02:18
Post #1





Grupa: Zarejestrowani
Postów: 17
Pomógł: 0
Dołączył: 16.05.2013

Ostrzeżenie: (0%)
-----


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

Ten post edytował Daiquiri 17.05.2013, 06:26:05
Powód edycji: [Daiquiri]: Poprawiam tag ;-)
Go to the top of the page
+Quote Post
sajegib
post 16.05.2013, 21:10:28
Post #2





Grupa: Zarejestrowani
Postów: 352
Pomógł: 59
Dołączył: 16.01.2013

Ostrzeżenie: (0%)
-----


Użyj w CSS :hover na podpunkt 2, a na podpunkt 3 np. jQuery i zdarzenie click
Go to the top of the page
+Quote Post
-Andrzej.W.-
post 16.05.2013, 21:12:40
Post #3





Goście







css
Kod
a:active
a:visited
a:hover
Go to the top of the page
+Quote Post
sajegib
post 16.05.2013, 21:18:51
Post #4





Grupa: Zarejestrowani
Postów: 352
Pomógł: 59
Dołączył: 16.01.2013

Ostrzeżenie: (0%)
-----


Cytat(Andrzej.W. @ 16.05.2013, 22:12:40 ) *
css
Kod
a:active
a:visited
a:hover



Pod warunkiem, że to będzie <a></a>
Go to the top of the page
+Quote Post
-Andrzej.W.-
post 16.05.2013, 21:27:30
Post #5





Goście







Cytat(sajegib @ 16.05.2013, 22:18:51 ) *
Pod warunkiem, że to będzie <a></a>

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

Ten post edytował Andrzej.W. 16.05.2013, 21:27:58
Go to the top of the page
+Quote Post
prantan
post 16.05.2013, 21:34:23
Post #6





Grupa: Zarejestrowani
Postów: 17
Pomógł: 0
Dołączył: 16.05.2013

Ostrzeżenie: (0%)
-----


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 smile.gif
Jutro przetestuję. Tym czasem ja lecę i pozdrawiam.
Go to the top of the page
+Quote Post
-Andrzej.W.-
post 16.05.2013, 21:42:23
Post #7





Goście







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. smile.gif
Pozdrawiam.
Andrzej.
Go to the top of the page
+Quote Post
in5ane
post 16.05.2013, 22:35:47
Post #8





Grupa: Zarejestrowani
Postów: 1 335
Pomógł: 34
Dołączył: 9.11.2005
Skąd: Wrocław

Ostrzeżenie: (10%)
X----


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


--------------------
> > > Tworzenie stron < < <
Go to the top of the page
+Quote Post
prantan
post 17.05.2013, 18:10:24
Post #9





Grupa: Zarejestrowani
Postów: 17
Pomógł: 0
Dołączył: 16.05.2013

Ostrzeżenie: (0%)
-----


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" smile.gif
Go to the top of the page
+Quote Post
in5ane
post 17.05.2013, 22:56:59
Post #10





Grupa: Zarejestrowani
Postów: 1 335
Pomógł: 34
Dołączył: 9.11.2005
Skąd: Wrocław

Ostrzeżenie: (10%)
X----


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?


--------------------
> > > Tworzenie stron < < <
Go to the top of the page
+Quote Post
jepek
post 17.05.2013, 23:48:22
Post #11





Grupa: Zarejestrowani
Postów: 55
Pomógł: 10
Dołączył: 12.08.2007

Ostrzeżenie: (0%)
-----


Cytat(prantan @ 17.05.2013, 19:10:24 ) *
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" smile.gif


Wyjaśnij dokładnie o co Ci chodzi, to zrobię Ci przykład i wytłumaczę krok po kroku. :-)
Go to the top of the page
+Quote Post
prantan
post 24.05.2013, 15:28:47
Post #12





Grupa: Zarejestrowani
Postów: 17
Pomógł: 0
Dołączył: 16.05.2013

Ostrzeżenie: (0%)
-----


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.

Ten post edytował prantan 24.05.2013, 15:29:52
Go to the top of the page
+Quote Post
jepek
post 25.05.2013, 11:14:16
Post #13





Grupa: Zarejestrowani
Postów: 55
Pomógł: 10
Dołączył: 12.08.2007

Ostrzeżenie: (0%)
-----


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.

Ten post edytował jepek 25.05.2013, 11:15:36
Go to the top of the page
+Quote Post
prantan
post 25.05.2013, 15:29:06
Post #14





Grupa: Zarejestrowani
Postów: 17
Pomógł: 0
Dołączył: 16.05.2013

Ostrzeżenie: (0%)
-----


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.
Go to the top of the page
+Quote Post
xxdrago
post 26.05.2013, 11:14:50
Post #15





Grupa: Zarejestrowani
Postów: 654
Pomógł: 42
Dołączył: 27.07.2010
Skąd: Jaworzno

Ostrzeżenie: (0%)
-----


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

Ten post edytował xxdrago 26.05.2013, 11:15:12


--------------------
GG: 10972302 :)
Go to the top of the page
+Quote Post
prantan
post 17.06.2013, 23:28:28
Post #16





Grupa: Zarejestrowani
Postów: 17
Pomógł: 0
Dołączył: 16.05.2013

Ostrzeżenie: (0%)
-----


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?
Go to the top of the page
+Quote Post
lobopol
post 18.06.2013, 05:16:05
Post #17





Grupa: Zarejestrowani
Postów: 1 729
Pomógł: 346
Dołączył: 4.04.2009

Ostrzeżenie: (0%)
-----


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


--------------------
Go to the top of the page
+Quote Post

Reply to this topicStart new topic
1 Użytkowników czyta ten temat (1 Gości i 0 Anonimowych użytkowników)
0 Zarejestrowanych:

 



RSS Wersja Lo-Fi Aktualny czas: 21.07.2025 - 12:23