Ogłoszenie

Ogłoszenie Module
Zwiń
No announcement yet.

Animowany przycisk na stronie

Page Title Module
Przenieś Usuń Zwiń
X
Conversation Detail Module
Zwiń
  • Filtr
  • Czas
  • Pokaż
Wyczyść wszystko
new posts

  • Animowany przycisk na stronie

    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ć?
    Tak, to ja, a tam obok siedzi moje zdanie. Ale wcale nie musisz nas respektować.

  • #2
    używasz jakichś programów to tworzenia stron? albo graficznych, np. Photoshop?
    STEVE JOBS JUST BOUGHT AND SOLD YOU THREE TIMES

    Komentarz


    • #3
      Dopiero bawię się stronami, używam iWeb. Graficzny - projektuję w PS.
      Tak, to ja, a tam obok siedzi moje zdanie. Ale wcale nie musisz nas respektować.

      Komentarz


      • #4
        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
        Ostatnio edytowany przez mirrr; [ARG:4 UNDEFINED].

        Komentarz


        • #5
          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

          Komentarz


          • #6
            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.
            Tak, to ja, a tam obok siedzi moje zdanie. Ale wcale nie musisz nas respektować.

            Komentarz


            • #7
              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...
              STEVE JOBS JUST BOUGHT AND SOLD YOU THREE TIMES

              Komentarz


              • #8
                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):
                ==
                <script type="text/javascript">
                function mouseOver()
                {
                document.rollover_one.src ="http://twojadomena.pl/roll/obrazek1.png"
                }
                function mouseOut()
                {
                document.rollover_one.src ="http://twojadomena.pl/roll/obrazek2.png"
                }
                </script>
                <a href="http://twojadomena.pl/link_docelowy.html">
                <img alt="Link Docelowy" src="http://twojadomena.pl/roll/obrazek2.png" name="rollover_one" width="szerokość" height="wysokość" onmouseover="mouseOver()" onmouseout="mouseOut()" style="border: none;"/></a>
                ==

                Gdybyś miał jakieś pytania pisz na PW - bez drobnych opłat
                Ostatnio edytowany przez Foucault; [ARG:4 UNDEFINED]. Powód: Dopiero teraz zauważyłem że napisałeś o iWebie.

                Komentarz


                • #9
                  Zamieszczone przez iPestek Zobacz posta
                  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 ----
                  Zamieszczone przez Foucault Zobacz posta
                  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):
                  ==
                  <script type="text/javascript">
                  function mouseOver()
                  {
                  document.rollover_one.src ="http://twojadomena.pl/roll/obrazek1.png"
                  }
                  function mouseOut()
                  {
                  document.rollover_one.src ="http://twojadomena.pl/roll/obrazek2.png"
                  }
                  </script>
                  <a href="http://twojadomena.pl/link_docelowy.html">
                  <img alt="Link Docelowy" src="http://twojadomena.pl/roll/obrazek2.png" name="rollover_one" width="szerokość" height="wysokość" onmouseover="mouseOver()" onmouseout="mouseOut()" style="border: none;"/></a>
                  ==

                  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
                  Ostatnio edytowany przez funky; [ARG:4 UNDEFINED]. Powód: Wpisy zostały automatycznie połączone
                  animowane życie...

                  Komentarz


                  • #10
                    Zamieszczone przez funky Zobacz posta
                    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ć.
                    STEVE JOBS JUST BOUGHT AND SOLD YOU THREE TIMES

                    Komentarz


                    • #11
                      Zamieszczone przez iPestek Zobacz posta
                      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.
                      animowane życie...

                      Komentarz


                      • #12
                        Zamieszczone przez funky Zobacz posta
                        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

                        Komentarz


                        • #13
                          Zamieszczone przez Foucault Zobacz posta
                          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ć
                          animowane życie...

                          Komentarz


                          • #14
                            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.
                            Tak, to ja, a tam obok siedzi moje zdanie. Ale wcale nie musisz nas respektować.

                            Komentarz

                            Pracuję...
                            X