Jump to content

Witaj!

Zaloguj lub Zarejestruj się aby uzyskać pełny dostęp do forum.

Photo
- - - - -

Animowany przycisk na stronie


  • Please log in to reply
13 replies to this topic

#1 Riddle

Riddle
  • 1631 posts
  • SkądWarszawa

Posted 14 January 2010 - 18:09

Nie wiem, czy to najlepsze miejsce na ten temat, ale: Chcę na stronie mieć animowane przyciski, przy czym tą animacją może być chociaż pojawienie się po najechaniu myszką kwadracika obok linku. Jak coś takiego można zrobić?

#2 iPestek

iPestek
  • 564 posts
  • SkądKópertino

Posted 14 January 2010 - 18:15

używasz jakichś programów to tworzenia stron? albo graficznych, np. Photoshop?

#3 Riddle

Riddle
  • 1631 posts
  • SkądWarszawa

Posted 14 January 2010 - 18:43

Dopiero bawię się stronami, używam iWeb. Graficzny - projektuję w PS.

#4 mirrr

mirrr
  • 127 posts
  • SkądWodzisław Śl

Posted 14 January 2010 - 21:30

OnMouseOver - np. tak: [js] przycisk typu IMAGE, z efektem onmouse over - Forum PHP.pl lub w CSS: [HTML][CSS] Problem z onmouseover i 'out - Forum PHP.pl

#5 Foucault

Foucault
  • 197 posts

Posted 14 January 2010 - 22:16

Jeżeli chodzi Ci o animację taką jak przyciski na górze strony tu: MODNA ŁAZIENKA - ParadyĹź Tubądzin Grespania to tworzysz animowanego gifa oraz wersję statyczną. Wersja statyczna zaczyna się animować po najechaniu kursorem metodą opisaną w poście wyżej.
Po więcej szczegółów odsyłam do Osobistej Narzeczonej: www.nunami.pl

#6 Riddle

Riddle
  • 1631 posts
  • SkądWarszawa

Posted 14 January 2010 - 22:41

Chodzi mi o podobny efekt jak tutaj: the green room blog

Na razie próbowałem tego od mirrr - wyszło, że wkurzyłem się, a i tak skończyło się, że efektem pracy było pojawienie się na całej stronie ukośnych kreseczek. :(

#7 iPestek

iPestek
  • 564 posts
  • SkądKópertino

Posted 15 January 2010 - 00:17

mozna to zrobic w photoshopie. robisz jeden plik gif z napisem a drugi z napisem i wymaganym przez ciebie kwadratem, i dajesz jako rollover. kiedys z latwoscia mozna to bylo zrobic w Photoshop Image Ready...

#8 Foucault

Foucault
  • 197 posts

Posted 15 January 2010 - 11:52

W czym to robisz? Tzn. ręcznie czy iWebem lub innym edytorem?
Rozumiem że masz przygotowane dwie grafiki a problem leży po stronie kodu?

Spróbuj tak:
Obie wersje grafiki (czyli przed i po) wrzucasz do katalogu np "roll" na serwerze.
W iWeb tworzysz widget html z takim kodem (elementy zielone edytujesz samodzielnie):
==

http://twojadomena.p...r: none;"/>
==

Gdybyś miał jakieś pytania pisz na PW - bez drobnych opłat :)

#9 funky

funky
  • 30 posts

Posted 15 January 2010 - 12:42

mozna to zrobic w photoshopie. robisz jeden plik gif z napisem a drugi z napisem i wymaganym przez ciebie kwadratem, i dajesz jako rollover. kiedys z latwoscia mozna to bylo zrobic w Photoshop Image Ready...



To nie jest najlepsze rozwiązanie. Gdy strona jest rozbudowana (przeciążona) grafiką zamiast animacji po najechaniu na button będziesz musiał chwile poczekać na wczytanie drugiego gifa - rollover. Zanim zaczniesz coś tworzyć zapoznaj się z możliwościami CSS'a oraz poczytaj o różnicach w wyświetlaniu (interpretowaniu) kodu html (xhtml) i Css pod różnymi przeglądarkami. Sposób opisany poniżej jest uniwersalny.

Najlepiej jest zrobić tak - w photoshopie robisz buttona właściwego nad nim robisz wersje tego który pojawia się po najechaniu kursorem - dwa buttony w jednym pliku - zapisujesz jako gifa (z własną paletą lub jpg, png) - tak aby uzyskać najlepszy współczynnik wielkości pliku do jakości. Później kilka linijek w CSSie i już wszystko pięknie gra:).
A najlepiej rozwiązanie to zostawić to osobie, która zrobi to poprawnie za drobną kasę;). Wtedy masz pewność, że strona będzie śmigać we wszystkich popularnych przeglądarkach (IE, Firefox, Safari, Opera, Chrome) oraz wszystkich typowych (czytaj popularnych) rozdzielczościach.

Jak coś pisz na priv.

---- Dodano 15-01-2010 o godzinie 15:35 ----

W czym to robisz? Tzn. ręcznie czy iWebem lub innym edytorem?
Rozumiem że masz przygotowane dwie grafiki a problem leży po stronie kodu?

Spróbuj tak:
Obie wersje grafiki (czyli przed i po) wrzucasz do katalogu np "roll" na serwerze.
W iWeb tworzysz widget html z takim kodem (elementy zielone edytujesz samodzielnie):
==

http://twojadomena.p...r: none;"/>
==

Gdybyś miał jakieś pytania pisz na PW - bez drobnych opłat :)



Mam nadzieje, że to nie aluzja do mnie ;) - za wiedzę trzeba płacić zwłaszcza jeśli się nie chce użyć przyjaciela googla.

A tak na serio po co angażować w to JS. Owszem Twój sposób zadziała, ale jak ktoś ma wyłączoną obsługę JS (lub blokuje NoSriptem czy też innym dodatkiem) to już wszystko się sypie.
Wystarczy jedna linijka CSS'a. Zresztą temat wiele razy poruszany - poszukajcie w googlach.

Ps.
Nie problem zrobić coś aby działało, tylko zrobić to dobrze i w zgodzie z przyjętymi standardami. Wtedy masz pewność i spokój na długi czas :)

#10 iPestek

iPestek
  • 564 posts
  • SkądKópertino

Posted 15 January 2010 - 17:14

To nie jest najlepsze rozwiązanie. Gdy strona jest rozbudowana (przeciążona) grafiką zamiast animacji po najechaniu na button będziesz musiał chwile poczekać na wczytanie drugiego gifa - rollover. Zanim zaczniesz coś tworzyć zapoznaj się z możliwościami CSS'a oraz poczytaj o różnicach w wyświetlaniu (interpretowaniu) kodu html (xhtml) i Css pod różnymi przeglądarkami. Sposób opisany poniżej jest uniwersalny.


Przyznam, że już dawno nie robiłem stron i zapomniałem już podstawy HTMLa. Masz racje, grafiki przeciążają stronę, ale mamy już tak szybkie łącza, że dziś nie problem "ciężka" strona. Aż się roi od stron przeładowanych flashem (co przyznacie niekiedy jest niepraktyczne i niefunkcjonalne - często przerost formy nad treścią). Minusem było jednak to, że Image Ready robił niezły śmietnik w kodzie, który często trzeba było wyedytować.

#11 funky

funky
  • 30 posts

Posted 15 January 2010 - 19:44

Przyznam, że już dawno nie robiłem stron i zapomniałem już podstawy HTMLa. Masz racje, grafiki przeciążają stronę, ale mamy już tak szybkie łącza, że dziś nie problem "ciężka" strona. Aż się roi od stron przeładowanych flashem (co przyznacie niekiedy jest niepraktyczne i niefunkcjonalne - często przerost formy nad treścią). Minusem było jednak to, że Image Ready robił niezły śmietnik w kodzie, który często trzeba było wyedytować.


Każda technologia niesie ze sobą plusy i minusy np. z flashem kiedyś był straszny problem z pozycjonowaniem - trzeba było robić alternatywny content na bazie htmla - dziś jest lepiej i można już sporo zdziałać bez tego, ale jeszcze sporo zostało aby content z flasha był równoznaczny z tym w htmlu czy nawet pdfie. Z flashem mam do czynienia od wersji 3 (Macromedia) i postęp jaki się dokonał przez te kilka ładnych lat jest ogromny. Dla niektórych przesiadka z AS2 na AS3 to sporo;). We flashu też można zrobić świętną i zoptymalizowaną stronę, która nie będzie zjadała 90% zasobów procesora.

#12 Foucault

Foucault
  • 197 posts

Posted 16 January 2010 - 00:11

Mam nadzieje, że to nie aluzja do mnie ;) - za wiedzę trzeba płacić zwłaszcza jeśli się nie chce użyć przyjaciela googla.


No niestety - aluzja była do Ciebie :)
Zgadzam się że za porządny produkt trzeba zapłacić. Zgadzam się że css jest dobrym pomysłem.
A teraz odpowiedz sobie na pytanie dla kogo jest iWeb. Nie dla ludzi którzy chcą wgryzać się w problemy składni. Nie dla ludzi którzy którzy chcą budować złożone serwisy. Jest dla ludzi którzy w prosty sposób chcą stworzyć serwis wizytówkowy, galerię zdjęć z wakacji etc. Podobnie jak iMovie nie nadaje się do profesjonalnych produkcji za to idealnie sprawdza się w domowych zastosowaniach których celem jest pochwalenie się swoim projektem przed znajomymi i rodziną.
Taka już cecha większości produktów spod znaku WYSIWYG.
Żądanie opłat za pomoc jest bezcelowe (uwierz, że to łagodny przymiotnik) z dwóch powodów:
- riddlen dłubie sobie stronkę.. on nie chce mieć gotowego produktu, chce poznać schemat działania i nauczyć się czegoś prostego i efektownego - dla niego jest iWeb
- gdyby riddlen był firmą lub robił duży projekt zwróciłby się z zapytaniem do firmy która w zamian za pracę wystawiłaby mu fakturę.
Masz rację jeśli chodzi o google. Tam da się znaleźć wszystko. Ale czy można mieć pretensje że ktoś szuka odpowiedzi na nurtujące go pytanie w niszowym dziale niszowego forum? Jeśli wszystko jest w googlach to po cholerę to forum?

Pozdrawiam bez złośliwości

#13 funky

funky
  • 30 posts

Posted 16 January 2010 - 01:37

No niestety - aluzja była do Ciebie :)
Zgadzam się że za porządny produkt trzeba zapłacić. Zgadzam się że css jest dobrym pomysłem.
A teraz odpowiedz sobie na pytanie dla kogo jest iWeb. Nie dla ludzi którzy chcą wgryzać się w problemy składni. Nie dla ludzi którzy którzy chcą budować złożone serwisy. Jest dla ludzi którzy w prosty sposób chcą stworzyć serwis wizytówkowy, galerię zdjęć z wakacji etc. Podobnie jak iMovie nie nadaje się do profesjonalnych produkcji za to idealnie sprawdza się w domowych zastosowaniach których celem jest pochwalenie się swoim projektem przed znajomymi i rodziną.
Taka już cecha większości produktów spod znaku WYSIWYG.
Żądanie opłat za pomoc jest bezcelowe (uwierz, że to łagodny przymiotnik) z dwóch powodów:
- riddlen dłubie sobie stronkę.. on nie chce mieć gotowego produktu, chce poznać schemat działania i nauczyć się czegoś prostego i efektownego - dla niego jest iWeb
- gdyby riddlen był firmą lub robił duży projekt zwróciłby się z zapytaniem do firmy która w zamian za pracę wystawiłaby mu fakturę.
Masz rację jeśli chodzi o google. Tam da się znaleźć wszystko. Ale czy można mieć pretensje że ktoś szuka odpowiedzi na nurtujące go pytanie w niszowym dziale niszowego forum? Jeśli wszystko jest w googlach to po cholerę to forum?

Pozdrawiam bez złośliwości



Zgadzam się z Tobą jak najbardziej. Jak napisałem wcześniej (w poprzednim poście) chodziło o zwrócenie uwagi aby przynajmniej pokwapić się do googla i poszukać. Jeśli ktoś chce rybę zamiast wędki to musi za nią zapłacić (mniejsza o cenę - to była tylko metafora) ;) - przecież ktoś wykonał za niego pracę.
Z chęcią pomogę, doradzę jeśli tylko jestem wstanie i moja wiedza na to pozwoli, ale nie popieram naszej polskiej wrodzonej natury (wręcz oczekiwań), że inni za mnie coś zrobią (znajdą, napiszą) a ja z tego skorzystam.

Uważam, że na jednych z pierwszych zajęć z informatyki (np. w liceum lub gimnazjum) nauczyciele powinni nauczyć/pokazać* jak korzystać z wyszukiwarek - budować zapytania etc.
Życie byłoby wtedy łatwiejsze ;) dla wszystkich.

*niepotrzebne skreślić

#14 Riddle

Riddle
  • 1631 posts
  • SkądWarszawa

Posted 16 January 2010 - 09:12

Tylko Google nie powie, co robię źle. Szukałem odpowiedzi, ale okazało się,*że problemem na mojej stronie była awaria widgetów iWorka. HTML-a i innych webowych języków nigdy się*nie uczyłem, więc te rzeczy sprawiają*mi problem, bo gdy coś zrobię, ale błędnie - nie wiem co jest błędem.




1 user(s) are reading this topic

0 members, 1 guests, 0 anonymous users