Спрайт — это набор изображений, соединенных в одно изображение.
Веб-страница, содержащая множество изображений, долго загружается и генерирует множество запросов серверу.
Использование спрайтов уменьшает количество запросов серверу, в результате уменьшает время загрузки страницы и сокращает трафик.
Простой пример изображения-спрайта
Вместо использования трех разных изображений мы используем одно («img_navsprites.gif»):
С помощью CSS мы можем отображать только ту часть изображения, которая нам нужна.
В следующем примере css-стиль указывает, какая часть изображения «img_navsprites.gif» должна отображаться:
img.home { width:46px; height:44px; background:url(img_navsprites.gif) 0 0;
}
Разберем пример:
— мы указываем маленькое прозрачное изображение 1х1 пиксель из-за того, что атрибут src не должен быть пустым. Отображаемый спрайт будет фоном этого прозрачного изображения- width:46px;height:44px; — указываем видимую часть спрайта
- background:url(img_navsprites.gif) 0 0; — задаем фоновое изображение и его положение (left 0px, top 0px)
Это простейший способ использования спрайтов-изображений, теперь мне хотелось бы показать вам, как мы сделаем из частей спрайта ссылки, которые будут реагировать на мышь.
Спрайты — меню
Мы будем использовать то же изображение («img_navsprites.gif») для создания навигации.
Мы будем использовать список HTML, потому что в него можно вложить ссылки и пункты списка поддерживают фоновое изображение:
#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;} #home{background:url(‘img_navsprites.gif’) 0 0;} #prev{left:63px;width:43px;} #prev{background:url(‘img_navsprites.gif’) -47px 0;} #next{left:129px;width:43px;}
#next{background:url(‘img_navsprites.gif’) -91px 0;}
Разберем пример:
- #navlist{position:relative;} — задаем относительное позиционирование для того, чтобы можно было применить внутри блока абсолютное позиционирование
- #navlist li{margin:0;padding:0;list-style:none;position:absolute;top:0;} — обнуляем margin и padding, удаляем маркеры и позиционируем пункты списка абсолютно
- #navlist li, #navlist a{height:44px;display:block;} — задаем изображениям высоту 44px
Теперь займемся позиционированием каждого элемента:
- #home{left:0px;width:46px;} — позиционируем элемент слева, задаем ширину в 46px
- #home{background:url(img_navsprites.gif) 0 0;} — прописываем фоновое изображение, позиционируем его (left 0px, top 0px)
- #prev{left:63px;width:43px;} — позиционируем на 63px слева и выставляем ширину в 43px.
- #prev{background:url(‘img_navsprites.gif’) -47px 0;} — опять же прописываем фоновое изображение на 47px справа
Остальные пункты позиционируются аналогично.
Эффект наведения
Теперь мне хочется, чтобы при наведении курсора мыши изображение менялось.
Для этого мы будем использовать изображение («img_navsprites_hover.gif»), содержащее три предыдущих изображения плюс три их аналога в момент наведения мыши:
Так как это одно изображение, а не шесть отдельных, в момент наведения курсора мыши, изображение будет меняться без задержки для обращения к серверу.
Чтобы наш прием сработал, надо добавить три строки кода:
#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;}
Разберемся:
- так как пункты списка содержат ссылки, мы может использовать псевдо-класс :hover
- #home a:hover{background: transparent url(img_navsprites_hover.gif) 0 -45px;} — для всех изображений мы указываем такое же положение фонового изображения (спрайта), но на 45px ниже