Perfection or Vanity

Project: Terminated

Blog nie jest już dalej prowadzony ani aktualizowany. Mimo tego, wpisy i komentarze są dalej dostępne. Możesz przeczytać pożegnalny wpis albo przejść do archiwum.

Efekt rollover w CSS

25 sierpnia 2005

Sztuczka ta jest bardzo stara i znana w światku Ludzi Którzy Uwierzyli, ale nadal może być czymś nowym dla innych designerów. Technika rollover na obrazkach polega oczywiście na zamienianiu ich po najechaniu kursorem. Tworzy się gustowna, interaktywna animacja. Wszystko przy wsparciu ze strony JavaScript.

Otóż nie musi tak być. Od czego mamy CSS?

— „No tak, ale żeby umieścić obrazek za pomocą arkusza stylów musi być on ustawiony jako tło.” — odezwie się głos z sali.
— „A przecież — ktoś może dodać — obrazki tła nie są ładowane, jeśli nie są aktualnie wyświetlone, co spowoduje długaśną przerwę podczas ich zamiany!”
— „No! A w JavaScript możemy załadować obrazek do tablicy!” — zakrzyknie trzeci.

Mają rację, ale nie do końca. Nie poznali najwidoczniej techniki, którą zaprezentuję. Najprościej mówiąc: mamy jeden obrazek, sklejony z dwóch o identycznej wielkości i przesuwamy go po najechaniu gryzoniem. Przykład (nowa strona):

CSS Rollover - podgląd nowej strony

Korzystając z selektora elementu razem z pseudoklasą :hover przesuwamy tło za pomocą background-positon. Obrazek jest złożony w moim przypadku z dwóch pionowych - na górze efekt zwyczajny, na dole podmiana. W standardowym widoku obrazek musi być ustawiony jako tło bez powtarzania, przyległe do lewej i górnej krawędzi bloku - u nas hiperłącza zamienionego na blok.

Po najechaniu na obrazek (:hover) przesuwamy pionowo obrazek o minusową wartość połowy jego wysokości. Przesuwamy dzięki temu do góry - o wysokość każdego z dwóch teł. Teraz podczas ładowania strony załaduje się tło, minimalne większe, wyświetli i po najechaniu myszką mamy efekt typu instant. Voilà!

Dla dużych obrazków i zwiększonej dostępności najlepiej stosować ulepszoną wersję CSS rollover.

Tagi wpisu:

Informacje i hiperłącza

To ja! Piotr Petrus 'Riddle'

Blog o projektowaniu zgodnych ze standardami stron internetowych.

Praktyczne przykłady, sztuczki CSS, sposoby obchodzenia błędów przeglądarek, lekki i nieinwazyjny JavaScript, użyteczny design, dostępność i skrypty użytkownika.

RSS

Informacje o wpisie

Napisał riddle 25 sierpnia 2005 o 20:15

Kategorie: CSS, Webdesign na luzie

Dodaj do:

Wpisy archiwalne

Archiwum miesięczne

Dzięki!

Dodaj bloga do Technorati Favorites Dodaj bloga do Del.icio.us Blog należy do sieci 10przykazań.com

Komentarze

  1. nbw 1 25 sierpnia 2005, 20:16

    Ano. Sztuczka nazywa się Sliding doors of css. Komercyjnie ją już kilka razy zastosowałem.

    Robi wrażenie na klientach :)

  2. PeCet 2 25 sierpnia 2005, 20:17

    świetne :), dzięki może kiedyś się przyda!

  3. W3 3 25 sierpnia 2005, 20:18

    A ujrzymy ją w "Illuminati"? :P

  4. dulek 4 25 sierpnia 2005, 20:18

    Ale w IE chyba nie działa :P

  5. riddle 5 25 sierpnia 2005, 20:19

    IE 6.0 - działa. :]

  6. dulek 6 25 sierpnia 2005, 20:20

    A owszem, w końcu to a z "display: block;" :P

  7. PeCet 7 25 sierpnia 2005, 20:21

    Mały offtopic:
    a jeśli jeszcze drogi riddlu, powiedziałbyś mi jak zrobić za pomocą javascriptu, php (w zasadzie wszystko mi jedno za pomocą czego, ważne żeby w szablonie joggera działało...) tak żeby jako logo pojawiał się losowy obrazek z kilku dostępnych, będę wdzieczny za ewentualną odpowiedź :)

  8. riddle 8 25 sierpnia 2005, 20:22

    w3: Illuminati jest CSSem dla zabawy, jak mi się będzie chciało to coś do niego dorobię. ;) W sumie zaczęło się od tego ambigramu… i nie mam narazie weny twórczej. :)
    dulek: Żeby Cię jeszcze załamać powiem, że w 5.5 i 5.0 też działa. :D

  9. PeCet 9 25 sierpnia 2005, 20:25

    przepraszam o co chodzi z tym Illuminati? bo nie za bardzo łapię dowcip?

  10. riddle 10 25 sierpnia 2005, 20:26

    A w3 bawi się za dużo menu View w swojej przeglądarce. :>

  11. PeCet 11 25 sierpnia 2005, 20:26

    aha, dzięki riddle nawet nie wiedziałem że w firefoxie coś takiego jest, me lame :/

  12. nbw 12 25 sierpnia 2005, 20:28

    Działa też w IE 5.2 na macu. Sprawdzałem

  13. Hexe 13 25 sierpnia 2005, 21:15

    Ależ to proste ;P. A sama na to nie wpadłam do tej pory. Dzięki, z pewnością się przyda :).

  14. Superchimp 14 26 sierpnia 2005, 07:29

    Można jeszcze wykorzystać :active i zrobić obraz złożony z trzech części, no i trzeba pamiętać o Flickeringu ;)

  15. Superchimp 15 26 sierpnia 2005, 11:48

    nbw: to chyba jest pixy's no preload rollover; sliding door to troszkę inna rzecz. pzdr.

  16. Yano 16 26 sierpnia 2005, 14:04

    Bzz... http://efabrika.pl/faq/pokaz.php?story=20040728152149523
    :)

  17. Yano 17 26 sierpnia 2005, 14:06

    Aa… A co do zabawy menu View - zabronisz? Swoją drogą mógłbyś popracować nad tym Illuminati, bo mi się nawet podoba.

  18. Reinmar 18 26 sierpnia 2005, 22:05

    Ok. Takie rozwiązanie jest niezłe i rozwiązuje większość problemów. Kłopoty zaczynają się jednak kiedy nie znamy wysokości jaką może przyjąć link (zmiana wielkości czcionki, więcej tekstu). Wtedy trzeba chyba troche pokombinować... Ja znalazłem coś takiego:
    (html)
    <div><a href="">Tresc</a></div>

    (css)
    a {display:block; background-image:url('stan_podstawowy.png')}
    div {background-image:url('stan_hover.png')}
    a:hover {background-image:none}

    Ewentualnie element <div/> można zastąpić <li/>, czy jakimś nagłówkiem.

  19. alberht 19 30 sierpnia 2005, 23:38

    hmm, w ie7b1 wampir ładnie się zmienia, ale tekst już nie...

  20. michel 20 25 sierpnia 2006, 11:43

    chcialem zrobic menu z efektem rollover. dziala ale chcialbym je miec w poiomie. zmieniajac display: block, na inline-block. dziala jedynie na operze. czy jest jakis sposob aby uzyskac ten efekt w postaci poziomej rowniez na ff?
    Pozdrawiam

  21. Riddle 21 25 sierpnia 2006, 11:44

    Spróbuj tego:
    http://perfectionorvanity.com/2006/07/07/dwuczesciowe-wycentrowane-menu-w-css/

    Pozdrawiam

  22. Michał 22 29 września 2006, 01:44

    Fajnie, tylko jak ktoś ma wyłączone ładowanie obrazków, to nic nie widać. Link co prawda działa, ale nie bardzo wiem jak podstawić Alt do obrazka.

  23. Damian 23 12 listopada 2006, 00:36

    Co należy zrobić, aby obrazki nie były ładowowane podczas najechania myszką?

  24. rumikom 24 23 lipca 2007, 13:36

    hm stosuję hover dla wielu elementów nie tylko a. Problem jest taki, że przesuwanie tła (background-position) nie jest czytane przez Safari (podmienia obrazki ale nie czyta pozycji dla tła…

    nie wiem dlaczego nie wystarczy zwykły hover dla dowolnego elementu blokowego: li, p lub div. IE 6 tegonie czyta, chyba że wspomożemy go skryptami (łatwo je wyguglać).

    nazwa rollover bardziej kojarzy mi się ze starym tagiem dla IE który wczytywał stronę przy komendzie rollover tak jakby otwierał żaluzję (oczywiście w innych przeglądarkach efekt szatkował stronę na paski…

  25. vampiur 25 24 sierpnia 2007, 17:10

    A co jeśli chciałbym mieć kilka rolloverów, ale z różnymi tłami a nie jednym pod wszystkimi?

  26. Riddle 26 24 sierpnia 2007, 17:55

    Dodaj klasę / identyfikator i zmień obrazki tylko dla nich.

    a {
  display: block;
  width: 100px;
  height: 50px;
  background-repeat: no-repeat;
  background-position: 0 0;
}

a:hover {
  background-position: 0 -100px;
}

a.news { background-image: url(news.png); }
a.rss { background-image: url(rss.png); }
  27. wojtek 27 02 listopada 2007, 22:48

    A jeżeli chciałbyś przez najechanie zmienic tło elementu np. komórki tabeli pod kursorem i jednocześnie w innym miejscu strony np. innej komórki

Dodaj komentarz

Do formatowania komentarzy używaj Textile (HTML nie działa). Szczególnie jeśli wklejasz większe fragmenty kodu. W razie niepewności użyj podglądu komentarza.

Wypowiedzi obraźliwe, infantylne oraz nie na temat będą moderowane – pisząc postaraj się zwiększyć wartość dyskusji.

Komentarze nie służą do wysyłania wiadomości albo informowania o błędach, itd. Chcesz coś mi napisać – skontaktuj się.