sprite'ów
Sprite obrazu jest zbiorem obrazów umieszczone w pojedynczym obrazie.
Strona internetowa z wielu obrazów może zająć dużo czasu, aby załadować i generuje wiele żądań serwera.
Korzystanie sprite'ów zmniejszy liczbę wniosków serwera i zapisać przepustowości.
Sprite'ów - Prosty przykład
Zamiast korzystać z trzech oddzielnych obrazów, używamy tego jednego obrazu ("img_navsprites.gif") :
Z CSS, możemy pokazać tylko część obrazu potrzebujemy.
W poniższym przykładzie CSS określa, jaka część "img_navsprites.gif" obrazek, aby pokazać:
Przykład
#home
{
width: 46px;
height: 44px;
background: url(img_navsprites.gif) 0 0;
} Spróbuj sam " Przykład wyjaśnił:
-
<img id="home" src="img_trans.gif">- definiuje tylko mały przezroczysty obraz, ponieważ atrybut src nie może być pusta. Wyświetlany obraz będzie obraz tła określamy w CSS -
width: 46px; height: 44px;width: 46px; height: 44px;- Określa fragment obrazu, który chcemy użyć -
background: url(img_navsprites.gif) 0 0;- definiuje obraz tła i jego położenie (lewy 0px, top 0px)
Jest to najprostszy sposób na wykorzystanie sprite'ów, teraz chcemy rozszerzyć go za pomocą linków i unoszą się efektów.
Sprite'ów - Tworzenie listy nawigacji
Chcemy użyć obrazu sprite ("img_navsprites.gif") , aby utworzyć listę nawigacji.
Użyjemy listę HTML, ponieważ może to być link, a także obsługuje obraz tła:
Przykład
#navlist {
position: relative;
}
#navlist li {
margin: 0;
padding: 0;
list-style: none;
position: absolute;
top: 0;
}
#navlist li, #navlist a {
height: 44px;
display: block;
}
#home {
left: 0px;
width: 46px;
background: url('img_navsprites.gif')
0 0;
}
#prev {
left: 63px;
width: 43px;
background: url('img_navsprites.gif') -47px 0;
}
#next {
left: 129px;
width: 43px;
background: url('img_navsprites.gif')
-91px 0;
}
Spróbuj sam " Przykład wyjaśnił:
- #navlist {position:relative;} - pozycja jest ustawiona względem umożliwiają pozycjonowanie bezwzględne wewnątrz niego
- #navlist li {margin:0;padding:0;list-style:none;position:absolute;top:0;} - marża i wyściółka jest ustawiony na 0, list-style jest usuwana, a wszystkie elementy listy są absolutne pozycjonowane
- #navlist li, #navlist a {height:44px;display:block;} - wysokość wszystkich zdjęć są 44px
Teraz zaczynają położenia i stylu dla poszczególnych części:
- #home {left:0px;width:46px;} - umieszczone przez całą drogę w lewo, a szerokość obrazu jest 46px
- #home {background:url(img_navsprites.gif) 0 0;} - definiuje obraz tła, a jego położenie (lewy 0px, top 0px)
- #prev {left:63px;width:43px;} - Umieszczony 63px w prawo (#home szerokość 46px + jakiejś dodatkowej przestrzeni między elementami), a szerokość 43px.
- #prev {background:url('img_navsprites.gif') -47px 0;} - Określa 47px tła obrazu w prawo (#home szerokość 46px + 1px linia podziału)
- #next {left:129px;width:43px;} - Umieszczony 129px w prawo (początek #prev jest 63px + szerokość #prev 43px + dodatkowa przestrzeń), a szerokość 43px.
- #next {background:url('img_navsprites.gif') -91px 0;} - Określa 91px tła obrazu w prawo (#home szerokość 46px + 1px linia podziału + szerokość + #prev 43px 1px linia podziału)
Sprite'ów - Hover Effect
Teraz chcemy dodać efekt najechania na naszej liście nawigacyjnej.
 | Wskazówka: :hover selektor może być stosowany na wszystkich elementach, nie tylko na linki. |
|---|
Nasz nowy obraz ("img_navsprites_hover.gif") składa się z trzech obrazów nawigacyjnych oraz trzy obrazy do wykorzystania do efektów kursorem:
Ponieważ jest to jeden pojedynczy obraz, a nie sześć osobnych plików,nie będzie opóźnienia załadunku,gdy użytkownik najedzie nad obrazem.
Mamy tylko dodać trzy linie kodu, aby dodać efekt najechania:
Przykład
#home a:hover {
background: url('img_navsprites_hover.gif') 0 -45px;
}
#prev a:hover {
background: url('img_navsprites_hover.gif') -47px
-45px;
}
#next a:hover {
background: url('img_navsprites_hover.gif') -91px
-45px;
} Spróbuj sam " Przykład wyjaśnił:
- #home a:hover {background: transparent url('img_navsprites_hover.gif') 0 -45px;} - Dla wszystkich trzech obrazów unoszą się określić tę samą pozycję w tle, tylko na 45 dalej