-
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
Następne wpisy z tego wątku
- 31.08.11 17:38 the_foe
Najnowsze wątki z tej grupy
- Jakie znacie działające serwery grup dyskusyjnych?
- is it live this group at news.icm.edu.pl
- php, linki z nazwami a $_GET, SEO
- www polityka pl captcha
- dyktatura brudnego palucha
- www.znanylekarz.pl
- Czy pytanie o sczytywanie stron programami/skryptami to tu?
- Grupy webdevowe
- Jak wydrukować stronę?
- IIS, kilka witryn
- linki <a href="/strona.php"> (ze slashami)
- co rozszerza stronę??
- responsywny akapit <p>
- Czy istnieje jakiś emulator przeglądarek pod Mac'a?
- taka sama konfiguracja dla localhost i produkcji
Najnowsze wątki
- 2024-11-02 piszę list do św Mikołaja
- 2024-11-01 karta SIM nie działa w konkretnym smartfonie.
- 2024-11-01 Mamy WZROST! O 50% wzrosła ilość kredytów gotówkowych
- 2024-11-01 Warszawa => Expert Recruiter 360 <=
- 2024-11-01 Warszawa => Technical Leader (Java Background) <=
- 2024-11-01 Warszawa => Account Manager - Usługi rekrutacyjne <=
- 2024-11-01 Warszawa => Head of International Freight Forwarding Department <=
- 2024-11-01 Warszawa => Programista Dynamics 365 CRM <=
- 2024-11-01 Warszawa => Dynamics 365 CRM Developer <=
- 2024-11-01 Warszawa => Junior Rekruter <=
- 2024-11-01 Chrzanów => Specjalista ds. PR Produktowego <=
- 2024-11-01 Białystok => Full Stack web developer (obszar .Net Core, Angular6+) <
- 2024-11-01 Łódź => Frontend Engineer (Three.js) <=
- 2024-11-01 Warszawa => Junior Rekruter <=
- 2024-11-01 Gdańsk => Programista Full Stack .Net <=