W dzisiejszym artykule znów powracamy do CSS-ów. Co prawda nie będzie to kolejna demonstracja możliwości CSS3 (artykuł o tym zapewne już wkrótce 
), ale dzisiaj zaprezentuję moim zdaniem równie ciekawą, acz prostą technikę pozwalającą dodać trochę życia do linków – np. w menu.
Efektem końcowym będzie tzw. efekt bańki (ang. bubble) po najechaniu na link. Dodatkowo by uzyskać efekt wyskakującej ikonki na zdarzenie hover, posłużymy się techniką zwaną „sprite”.
Zacznijmy od HTML
Wyjściowa struktura dokumentu HTML jest stosunkowo prosta – mamy listę w której znajdują się cztery linki, z którymi będziemy pracować dalej:
-
<div id="content">
-
-
<ul id="links">
-
<li>
-
<a class="icon pierwszy" href="#">Pierwszy mamut</a>
-
</li>
-
<li>
-
<a class="icon drugi" href="#">Drugi mamut</a>
-
</li>
-
<li>
-
<a class="icon trzeci" href="#">Trzeci mamut</a>
-
</li>
-
<li>
-
<a class="icon czwarty" href="#">Czwarty mamut</a>
-
</li>
-
</ul>
-
-
</div>
Przygotowanie ikonek
Na potrzeby naszej listy będziemy potrzebować 8 ikonek. 4 małych i 4 dużych. Zasada jest taka, że po najechaniu na link mała ikonka zostanie zastąpiona dużą.
Aby jednak nie tworzyć 8 plików i niepotrzebnie nie podmieniać ich po najechaniu, można zastosować sprite i umieścić je wszystkie w jednym pliku. Dzięki temu zabiegowi nie musimy wysyłać 8 żądań, sumaryczna wielkość jednego pliku jest mniejsza niż 8 osobnych, a dodatkowo unikamy sytuacji, gdy na zdarzeniu hover użytkownik musi czekać na przeładowanie/wczytanie się ikonki.
Wynikowy plik graficzny wyglada następująco:
Połączenie elementów w CSS
Skoro mamy już gotowy dokument HTML i przygotowany odpowiednio plik graficzny zawierający wszystkie ikonki, czas połączyć oba te elementy, by uzyskać pożądany elekt.
W pierwszej kolejności definiujemy style by nasza lista była położona horyzontalnie. Następnie wszystkim linkom o klasie „icon” ustawiamy za tło nasz plik graficzny, dodatkowo ustawiając im stalą szerokość i wysokość, która jest równa rozmiarowi dużej ikonki.
-
#links {
-
list-style: none;
-
margin: 0px;
-
padding: 0px;
-
}
-
-
#links li {
-
display: inline-block;
-
margin: 0px;
-
padding: 0px;
-
-
}
-
-
#links li a.icon {
-
background: url(images/sprite.jpg) no-repeat;
-
display: block;
-
width: 128px;
-
height: 130px;
-
text-indent: -9999px;
-
}
Skoro już mamy ustawiony obszar widzialny dla linków (zdefiniowana wcześniej wysokość i szerokość z tłem graficznym), jedyne co pozostaje to ustalić współrzędne dla każdej ikonki, tego obszaru widzialnego.
-
#links li a.pierwszy {
-
background-position: -128px 0px;
-
}
-
#links li a.drugi {
-
background-position: -128px -140px;
-
}
-
#links li a.trzeci {
-
background-position: -128px -275px;
-
}
-
#links li a.czwarty {
-
background-position: -128px -410px;
-
}
I na koniec definiujemy style dla hover, czyli tak naprawdę przesuwamy obszar widzialny pliku graficznego na miejsce w którym znajduje się powiększona wersja każdej z ikonek.
-
#links li a.pierwszy:hover {
-
background-position: 0px 0px;
-
}
-
#links li a.drugi:hover {
-
background-position: 0px -140px;
-
}
-
#links li a.trzeci:hover {
-
background-position: 0px -275px;
-
}
-
#links li a.czwarty:hover {
-
background-position: 0px -410px;
-
}
I to tyle! tak naprawdę zaledwie kilka linijek styli i odpowiednio spreparowany plik graficzny i możemy uzyskać dość ciekawy efekt, naprawdę małym kosztem, a tym samym dostać +1 do usability
10 komentarze do “Wyskakująca ikonka na hover”
Fajny sposób. Właśnie najlepsze w tym jest to, że to jest wszystko w jednym pliku (chodzi o te mamuty).
Super podpowiedź. Idąc krok dalej można wszystkie sprites umieścić w jednym pliku… oszczędzamy w ten sposób na wywołaniach i ilości podlinkowanych plików…. warto popatrzeć czasem w źródła dużych portali – wiele guziczków, teł itp jest w ten sposób coraz częściej robione
faktycznie wiele portali wykorzystuje sprite
hmm pod chromem nic sie nie dzieje
odpalam chrome (v. 5.0.375.127) i się jednak dzieje tak jak powinno
Super trik
dzięki 
Fajny, prosty artykuł, tylko powiedz mi po co jest użyty „text-indent:-9999px;” a i można by jeszcze do stylów „a” dodać „outline: none” żeby przy klikaniu ramka nie wyjeżdżała za ekran.
Przecież to jest zwyczajny rollover w znaczniku a z hover’em posiadający atrybut
background-positionna minusie. W sumie tak jak użytkownika Maciek też jestem ciekaw po co użyłeśtext-indent: -9999px;I wszystko się zgadza rollover na linku z przesunięciem obszaru widzialnego grafiki w tle – dokładnie tak jak zostało to opisane
Jeżeli chodzi o text-indent: to zauważmy że linki posiadają tekst: Pierwszy mamut, Drugi mamut itd – zastosowanie tego atrybutu pozwoli na przesunięcie tego tekstu, czyniąc go niewidocznym dla użytkownika, a jednocześnie widocznym dla wyszukiwarek.
Fajnie było by dołączyć do tego opcję :visited po której otwierał by się obrazek na środku ekranu w pełnym rozmiarze.