Strona 1 z 2 12 OstatniOstatni
Pokaż wyniki od 1 do 10 z 14
  1. Awatar Riddle
    Dołączył
    Mar 2009
    Lokalizacja
    Warszawa
    Postów
    1,627

    Cytuj | #1

    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ć?
    Komputer: Macbook Pro 13.3, PC
    Telefon: iPhone 4S
    Tak, to ja, a tam obok siedzi moje zdanie. Ale wcale nie musisz nas respektować.


  2. Awatar iPestek
    Dołączył
    Dec 2008
    Lokalizacja
    Kópertino
    Postów
    565

    Cytuj | #2

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

  3. Awatar Riddle
    Dołączył
    Mar 2009
    Lokalizacja
    Warszawa
    Postów
    1,627

    Cytuj | #3

    Dopiero bawię się stronami, używam iWeb. Graficzny - projektuję w PS.
    Komputer: Macbook Pro 13.3, PC
    Telefon: iPhone 4S
    Tak, to ja, a tam obok siedzi moje zdanie. Ale wcale nie musisz nas respektować.

  4. Awatar mirrr
    Dołączył
    Jan 2007
    Lokalizacja
    Wodzisław Śl
    Postów
    126
    Ostatnio edytowane przez mirrr ; 14.01.2010 o 21:34
    Komputer: MacBook Pro 2,4 GHz 4 GB RAM
    Telefon: iPhone 3GS 16 GB white
    Odtwarzacz: iPod Shuffle
    Tablet: New iPad 32 GB WiFi white


  5. Dołączył
    Jan 2009
    Lokalizacja
    z głowy
    Postów
    193

    Cytuj | #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
    Komputer: Commodore C64, Atari 65XE, PowerMac G4, iMac 20", MacBook Pro 13''
    Telefon: HTC... ale wyciszony

  6. Awatar Riddle
    Dołączył
    Mar 2009
    Lokalizacja
    Warszawa
    Postów
    1,627

    Cytuj | #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.
    Komputer: Macbook Pro 13.3, PC
    Telefon: iPhone 4S
    Tak, to ja, a tam obok siedzi moje zdanie. Ale wcale nie musisz nas respektować.

  7. Awatar iPestek
    Dołączył
    Dec 2008
    Lokalizacja
    Kópertino
    Postów
    565

    Cytuj | #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


  8. Dołączył
    Jan 2009
    Lokalizacja
    z głowy
    Postów
    193

    Cytuj | #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 edytowane przez Foucault ; 15.01.2010 o 14:05 Powód: Dopiero teraz zauważyłem że napisałeś o iWebie.
    Komputer: Commodore C64, Atari 65XE, PowerMac G4, iMac 20", MacBook Pro 13''
    Telefon: HTC... ale wyciszony

  9. Awatar funky
    Dołączył
    Jun 2009
    Postów
    30

    Cytuj | #9

    Cytat 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 ----
    Cytat 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 edytowane przez funky ; 15.01.2010 o 15:35 Powód: Wpisy zostały automatycznie połączone
    Komputer: Mac Pro 4.1
    animowane życie...

  10. Awatar iPestek
    Dołączył
    Dec 2008
    Lokalizacja
    Kópertino
    Postów
    565

    Cytat 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

  • Strona 1 z 2 12 OstatniOstatni