Jeszcze lepszy efekt rollover w CSS
08 czerwca 2006
Rollover, śpieszę z wyjaśnieniem, jest to efekt podmiany obrazka na inny, gdy znajdzie się nad nim kursor myszy. Co to jest CSS rollover i czym się różni od swojego skryptowego przodka już pisałem i jeśli nie słyszeliście o tej metodzie, to możecie zechcieć się z nią teraz zapoznać.
Tyle słowem wstępu. Rollover jaki zaprezentowałem dawniej był całkiem sprytny, nie wymagał czekania na wczytanie drugiego obrazka, ale nie był doskonały. Jego ułomność wynikała z zachłyśnięcia się możliwościami obrazków teł - wciskalibyśmy je wszędzie. Jednak i one stwarzają kłopoty:
- Przeglądarki w znakomitej większości nie informują wystarczająco użytkownika, że coś się jeszcze ładuje. Firefox nie czyni tego wcale, Internet Explorer i Opera sygnalizują tylko liczbę elementów pozostałych do ściągnięcia.
- Ich dostępność kuleje 1.
- Nie są drukowane.
- Nie są indeksowane przez wyszukiwarki.
- Ich zapisywanie boli.
Ostatnie trzy punkty wymagają komentarza. Zastosowania podstawowych CSS rollovers w menu albo dla mniejszych przycisków jest jak najbardziej OK. Jednak gdy chcemy emulować funkcje JavaScript za pomocą CSS dla dużych obrazów, tworząc np.: galerię, to należy porzucić je dla rozwiązania opartego na prawdziwych obrazkach.
Podstawy teoretyczne są takie: tworzymy zdjęcie sklejone poziomo z dwóch jego stanów. Wstawiamy do dokumentu obrazek-link przez <a><img/></a>. Ustawiamy dla obrazka odpowiedni tekst alternatywny i wysokość (o tym dlaczego należy wstawiać height, już pisałem).
Kolejnym krokiem jest zamiana hiperłącza w element blokowy - display: block, ograniczenie jego szerokości do połowy szerokości obrazka oraz ustawienie przycinania wystającej reszty - overflow: hidden.
Następnie należy zająć się podmianą widzialnego kawałka obrazka na drugi, na razie niewidzialny. Zrobiłem to na trzy sposoby. Proponuję zapoznać się z kodem, podzieliłem CSS na trzy przejrzyste części.
Pierwszy używa dodatkowego obrazka tła dla blokowego hiperłącza. Jest przesunięte jak w starym CSS rollover, ale zakrywa je <img/>. Korzystając z selektora :hover dla linka włączamy niewidoczność dla obrazka (visibility: hidden), ujawniając to co leży pod nim. Właściwość visibility nie wpływa na ramkę jaką tworzy element wokoło siebie, więc wysokość rollovera pozostaje niezmieniona. Jest to dość tani chwyt, istnieją lepsze - o czym zaraz - ale możliwe, że kiedyś będzie trzeba użyć właśnie takiego sposobu.
Drugie podejście to skorzystanie z marginesu ujemnego, który przesuwa obrazek z lewo o połowę jego szerokości. I wszystko jasne. ;)
Trzeci przykład robi prawie to samo - lecz korzysta z właściwości text-indent, jako że nie zamienia obrazka w element blokowy.
Drugi przykład jest najdoskonalszy - można kliknąć prawym przyciskiem i zapisać obrazek. Trzeci podobnie, ale pojawia się dodatkowy mały odstęp poniżej obrazka. Pierwszy, jak pisałem, nie jest niczym bardzo interesującym.
Największym plusem widocznym dla zwykłego użytkownika jest ładowanie się obrazka od góry do dołu, jak bozia przykazała. Szturchanie obrazka myszką podczas ładowania włącza efekt rollover - nawet dla 10 górnych pikseli zdjęcia. Taki częściowy rollover nie działa tylko w pierwszym przykładzie 2.
Wszystkie przykłady działają w nieśmiertelnym trio - Firefox, Opera, Explorer. Misio 6 dostał parę hacków. Jeden jest związany z zapominaniem, że link jest blokowy, podczas stanu :hover. Drugi typ poprawek to zmiana hasLayout na true za pomocą zoom: 1.
Dla IE-malkontentów mam nowinę - Explorer w wersji siódmej radzi sobie z moim CSS-em bez hacków. Widząc to uśmiechnąłem się. ;)
Puck 5
08 czerwca 2006, 11:57