eGospodarka.pl
eGospodarka.pl poleca

eGospodarka.plGrupypl.comp.wwwJak zrobić graficzny roll over?Re: Jak zrobić graficzny roll over?
  • Path: news-archive.icm.edu.pl!news.icm.edu.pl!newsfeed.pionier.net.pl!news.dialog.net
    .pl!not-for-mail
    From: the_foe <t...@w...pl>
    Newsgroups: pl.comp.www
    Subject: Re: Jak zrobić graficzny roll over?
    Date: Wed, 31 Aug 2011 19:30:05 +0200
    Organization: Dialog Net
    Lines: 31
    Message-ID: <j3lr2t$qr7$1@news.dialog.net.pl>
    References: <1cshr0l0tst57.jcl2zrzhe1ip$.dlg@40tude.net>
    NNTP-Posting-Host: dynamic-81-168-209-245.ssp.dialog.net.pl
    Mime-Version: 1.0
    Content-Type: text/plain; charset=UTF-8; format=flowed
    Content-Transfer-Encoding: 8bit
    X-Trace: news.dialog.net.pl 1314811805 27495 81.168.209.245 (31 Aug 2011 17:30:05
    GMT)
    X-Complaints-To: a...@d...net.pl
    NNTP-Posting-Date: Wed, 31 Aug 2011 17:30:05 +0000 (UTC)
    User-Agent: Mozilla/5.0 (Windows; U; Windows NT 5.1; pl; rv:1.9.1.16) Gecko/20101125
    Thunderbird/3.0.11
    In-Reply-To: <1cshr0l0tst57.jcl2zrzhe1ip$.dlg@40tude.net>
    Xref: news-archive.icm.edu.pl pl.comp.www:399365
    [ ukryj nagłówki ]

    W dniu 2011-08-17 11:46, Marek pisze:
    > Witam,
    >
    > Roll over ma być fotografią czarnobiałą. Po najechaniu robi się ona
    > kolorowa. Zdjęcie w oryginale będzie tylko jedno - kolorowe. Czy jest jakiś
    > sposób na spowodowanie aby fotka była monochromatyczna pod "istotnymi"
    > przeglądarkami? Ostatecznie zastosuję Flash'a lecz wolałbym tego uniknąć.

    najprostsze sa dwie metody:
    1. robimy 2 obrazki, kolorowy i czarno-bialy i laczymy go w jeden, tak
    aby sasiadowaly ze soba. robimy diva, ktoremu nadajemy w css atrubut
    width height background-image background-position (wycinamy nasze
    zdjecie wymiarami i pozycja tla). nastepnie robimy dla diva :hover z
    pozycja background przesunieta o dlugosc (lub szerokosc, w zaleznosci
    jak polaczylismy obrazki) obrazka. duza zaleta jest preloadowanie
    drugiego obrazka (bo w rzeczywistosci przegladarka laduje jeden)

    2. uzywamy js do podmiany src dla img:
    <img src='pics/kolor.jpg'
    onMouseOver="this.setAttribute('src','pics/czb.jpg')
    ;"
    onMouseOut="this.setAttribute('src','pics/kolor.jpg'
    );" />

    zaleta tego rozwiazania jest, ze strona bedzie wyswitelac obrazek
    niezaleznie od css czy js. Wada, ze bedzie zauwazalny pierwszy moment
    zmiany obrazka. Mozna to rozwiazac pakujac w innym miejscu czarno-bialy
    obrazek do diva z warroscia stylu display:none. Jest to jednak malo
    eleganckie, ze wzgledu na to, ze przy wylaczeniu styli obrazek nam sie
    dodatkowo wyswietli.

    --
    the_foe

Podziel się

Poleć ten post znajomemu poleć

Wydrukuj ten post drukuj


Następne wpisy z tego wątku

Najnowsze wątki z tej grupy


Najnowsze wątki

Szukaj w grupach

Eksperci egospodarka.pl

1 1 1

Wpisz nazwę miasta, dla którego chcesz znaleźć jednostkę ZUS.

Wzory dokumentów

Bezpłatne wzory dokumentów i formularzy.
Wyszukaj i pobierz za darmo: