[CSS] Efekt Rollover - inna metoda

Posty · Wysłany: 20.01.2010 17:27 [CSS] Efekt Rollover - inna metoda

Nie raz pisząc stronę, stosujemy odnośniki obrazkowe. W części z nich na pewno następuje zmiana obrazka po najechaniu kursorem na link. Niestety następuje wtedy mignięcie, ponieważ nowy obrazek musi się wczytać. Chciałem Wam przedstawić, jak tego uniknąć, używając metody zwanej „CSS Rollover”. Najczęściej CSS Rollover polega na zmianie pozycji tła po najechaniu kursorem na link. Jest to dobry pomysł, jednak czasami jako odnosnik obrazkowy musimy (lub chcemy, bo nie mamy co napisać w a, a wiemy, że nie powinno się stosować pustych linków) zastosować img. Oczywiście można wywalić tekst poza a za pomocą ujemnego text-indent i korzystać z "normalnego" CSS Rollover polegającego na zmianie pozycji tła. Jednak chciałem Wam przedstawić moją metodę opartą na img i paddingu, dziwne, nie ? Być może, ktoś ją kiedyś już wymyślił - nie wiem - w każdym razie, nie znalazłem w sieci takiego CSS Rollover'a (być może niedokładnie szukałem).

Najpierw trzeba odpowiednio przygotować obrazek. Musimy z dwóch obrazków (podstawowy i ten, któy pojawi się po najechaniu kursorem na link) przygotować jeden, tak, aby obrazki znajdowały się jeden pod drugim. Podstawowy obrazek musi być na dole.

Teraz wystarczy już tylko napisać następujący kod:

Kod:

Zaznacz Podgląd (X)HTML Uruchom Zapisz

a#cssrollover {

display: block;

width: 300px;

height: 225px;

overflow: hidden;

}

a#cssrollover img {

margin: -225px 0 0 0;

}

a#cssrollover:hover {

padding: 225px 0 0 0;

height: 0;

}

Przeanalizujmy ten kod. Najpierw dla linku nadajemy wyświetlanie blokowe, a następnie wymiary - szerokość (obrazka) i wysokość (jednego obrazka, połowy przygotowanego wcześniej) oraz overflow: hidden. Teraz przypisujemy obrazkowi wewnątrz linku ujemny margines. Wartość tego marginesu wynosi tyle co wysokośc linku - wysokośc jednego obrazka (połowy tego przygotowanego wcześniej). Ostatnim krokiem jest nadanie górnego padding'u o wartości takiej samej jak wcześniej dla height linku i ujemnego marginesu obrazka.

Efekt jest taki

Co sądzicie o takim sposobie ? Smile

Jeśli coś jest niezrozumiale napisane to pisać co, a postaram się to poprawić - nigdy nie umiałem dobrze tłumaczyć Razz

.

EDIT

Zapomniałem napisać - metoda ta działa w IE 6, 7, 8, Fx, Operze i Chrome Smile

.

Posty · Wysłany: 20.01.2010 18:19

Spoko

Działa podobnie jak image-replecement jakkolwiek się to pisze Razz

Posty · Wysłany: 20.01.2010 18:30

myślę, że tworzenie takich obrazków (np. do galerii) to ból.
tak samo jak przymus ustawiania ich wymiarów

Posty · Wysłany: 20.01.2010 18:31

sposób bardzo popularny, oczywisty przynajmniej dla mnie. Obrazek podstawowy może być tez na górze, nawet lepiej by było, wystarczy zmienić

na

w marginie.

Ale twoje zastosowanie u mnie ma zastosowanie tylko w menu, albo jakichś prostych el., nigdy dla galerii

Posty · Wysłany: 20.01.2010 18:32

No tak Roberto bo wszystko powinno byc "automatyczne" Smile

Zademonstruj teraz konkurencyjny mechanizm Smile

ktory posiadasz na swojej stronie. Nie wstydz sie. Dont be shy? Very Happy

Posty · Wysłany: 20.01.2010 18:45

no najfajniej by było gdyby było automatycznie. mój mechanizm nie jest też taki super, bo wymaga dla każdego obrazka podania tła.

Man1ek - w menu to nie ma zbytnio sensu, bo menu to nie obrazki. to tekst.

Soanvig - szczerze to nie wiem co to ma wspólnego z i-r za bardzo

Siwy - ta metoda nazywa się raczej 'sliding doors' (ukrywanie kawałka czegoś poprzez jego przesunięcie) niż 'css rollover'

Posty · Wysłany: 20.01.2010 18:54

no tak ale często każdy <a> ma inne tło i niestandardowa, wygładzona czcionka więc trzeba użyć obrazków.

Posty · Wysłany: 20.01.2010 18:58

Roberto napisał(a):

Soanvig - szczerze to nie wiem co to ma wspólnego z i-r za bardzo

Ta... z czymś musiałem pomylić. nie ogarniam już tego Smile

Posty · Wysłany: 20.01.2010 19:07

Man1ek - pomijając fakt, że jest już coraz więcej metod na niestandardowe czcionki, a od wygładzania jest system (to nie średniowiecze! można sobie włączyć) to od tego jest image-replacement właśnie

Posty · Wysłany: 20.01.2010 19:22

tak ale to jest powiązane z JS a mało kto lubi tego używać do typografii bo od niej zależy praktycznie cały wygląd. Są jakieś inne metody?
Ta która zapisuje obrazek do diva przez php (kazdy pixel) jest raczej jeszcze gorsza od obrazek + css.

Posty · Wysłany: 20.01.2010 19:41

Cytat:

Siwy - ta metoda nazywa się raczej 'sliding doors' (ukrywanie kawałka czegoś poprzez jego przesunięcie) niż 'css rollover'

No tak, ale jak jest ten "normalny" CSS Rollover, gdzie przy hover'rze tło zmienia pozycję to nazywane to jest CSS Rollover Razz

. A przecież tam też obrazek jest częściowo schowany (tyle, że jest to tło). Mój działa podobnie, tyle, że przesuwa się nie tło a obrazek, to robi różnicę ?

Cytat:

sposób bardzo popularny, oczywisty przynajmniej dla mnie. Obrazek podstawowy może być tez na górze, nawet lepiej by było, wystarczy zmienić - na + w marginie.

Nie da rady tak raczej. Jak dasz dla obrazka margin na plusie to nie widać obrazka Wink

. Natomiast dając ujemny margin dopiero przy hoverze IE6 się gubi, bo w IE6 hover działa tylko dla linków (czy się mylę ?) Wink

.

Posty · Wysłany: 20.01.2010 19:47

http://www.webvamp.co.uk/blog/coding/graphical-css-rollover-menu/

o takie coś mi chodziło dokładnie Siwy Razz

przyzwyczaiłem się do tego sposobu bardzo, bo nigdy nie stwarza problemów, działa chyba pod każdą przeglądarką.

Posty · Wysłany: 20.01.2010 19:53

No to to jest ten "normalny" (jak ja to nazywam) CSS Rollover, który działa na zasadzie zmiany pozycji tła.

Posty · Wysłany: 20.01.2010 19:53

Man1ek - hm, image-replacement nie nie jest powiązane z JS ;]

Siwy - Rollover to efekt, który uzyskujesz. No a CSS bo przy pomocy CSS. Jednak ten efekt jest uzyskany przy pomocy tzw. "sliding doors" właśnie - bo przesuwasz sobie element (bądź jego część) i go nie widać - niczym właśnie takie przesuwane drzwi (chowające się w/za ścianą)

tak, w IE6 :hover jest rozpoznawany wyłącznie dla linków, ale możesz z tego skorzystać i przy :hover zmienić coś dla elementu znajdującego się w linku (czasem może być problem w IE6 - samej zmiany dla elementu w środku linku może nie wyłapać, jeżeli nic w stylu samego linka się nie zmieni - ale wtedy wystarczy np. zmienić border na taki sam i powinno banglać)

Posty · Wysłany: 20.01.2010 20:04

Cytat:

Siwy - Rollover to efekt, który uzyskujesz. No a CSS bo przy pomocy CSS. Jednak ten efekt jest uzyskany przy pomocy tzw. "sliding doors" właśnie - bo przesuwasz sobie element (bądź jego część) i go nie widać - niczym właśnie takie przesuwane drzwi (chowające się w/za ścianą)

Czyli chyba każdy CSS Rollover działa na tej zasadzie "sliding doors", tak ?

Jednak, gdy na obrazku ma nie być widac tekstu wpisanego z klawiatury, wydaje mi się poprawniejszym (subiektywnie lepszym) uzyskanie rollover'a przy pomocy obrazka niż tła dla linku, bo przecież stosując tło, odnosnik jest pusty (co jest raczej błędem). Ofc można dać text-indent ujemny, ale jak ktoś ma wyłączoną obsługę obrazków, albo ma przeglądarkę tekstową to nie zobaczy linka, bo obrazka nie widać, a tekst jest wywalony przez text-indent. Można zastosować image-replacement, ale będzie to wtedy duzo bardziej skomplikowane niż zwykły obrazek dla którego ustawić wystarczy alt.