HTML-верстка: инструменты и приемы профессиональной front-end разработки

Спрайты


назад вперед

Спрайты изображения

Спрайт — это набор изображений, соединенных в одно изображение.

Веб-страница, содержащая множество изображений, долго загружается и генерирует множество запросов серверу.

Использование спрайтов уменьшает количество запросов серверу, в результате уменьшает время загрузки страницы и сокращает трафик.


Простой пример изображения-спрайта

Вместо использования трех разных изображений мы используем одно ("img_navsprites.gif"):

С помощью CSS мы можем отображать только ту часть изображения, которая нам нужна.

В следующем примере css-стиль указывает, какая часть изображения "img_navsprites.gif" должна отображаться:

Пример

img.home
{
width:46px;
height:44px;
background:url(img_navsprites.gif) 0 0;
}

Посмотреть

Разберем пример:

Это простейший способ использования спрайтов-изображений, теперь мне хотелось бы показать вам, как мы сделаем из частей спрайта ссылки, которые будут реагировать на мышь.


Спрайты — меню

Мы будем использовать то же изображение ("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;}

Посмотреть

Разберем пример:

Теперь займемся позиционированием каждого элемента:

Остальные пункты позиционируются аналогично.


Эффект наведения

Теперь мне хочется, чтобы при наведении курсора мыши изображение менялось.

Для этого мы будем использовать изображение ("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;}

Посмотреть

Разберемся:



Понравилась запись? Сказать "Спасибо" очень просто, поделитесь записью в социальных сетях!


назад вперед

СТАТИСТИКА



ССЫЛКИ


Подпишись на новости сайта