CSS спрайты изображений

Спрайт изображений - это набор разных изображений, которые объединены в одном общем файле изображения.

Для загрузки веб-страницы с большим количеством изображений может потребоваться много времени. При этом, такая веб-страница генерирует множество запросов к серверу, занимая канал связи.

Использование спрайтов изображений позволяет сократить количество запросов к серверу и сэкономить потребляемые ресурсы.

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

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

При помощи CSS мы может показать только ту часть, которая нужна именно в данный момент.

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


<style>
#home {
  width: 46px;
  height: 44px;
  background: url('img_navsprites.gif') 0 0;
}
</style>

<img id="home" src="//msiter.ru/img_trans.gif" width="1" height="1">

Результат:

Объяснение примера:

<img id="home" src="//msiter.ru/img_trans.gif"> - Определяет небольшое прозрачное изображение, так как атрибут src не может быть пустым. Основное изображение будет фоновым, его мы определяем при помощи CSS.
width: 46px; height: 44px; - Определяет используемую нами часть изображения
background: url(img_navsprites.gif) 0 0; - Определяет фоновое изображение и его местонахождение (слева 0px, сверху 0px)

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

Спрайты изображений - Создаем список ссылок навигации

Для создания списка ссылок навигации мы будем использовать спрайт изображений ("img_navsprites.gif") и HTML список.

HTML список удобен тем, что он может содержать ссылки и также поддерживает фоновые изображения:


<style>
#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;
}
</style>

<ul id="navlist">
  <li id="home"><a href="//msiter.ru/default.asp"></a></li>
  <li id="prev"><a href="//msiter.ru/css_intro.asp"></a></li>
  <li id="next"><a href="//msiter.ru/css_syntax.asp"></a></li>
</ul>

Результат:

Объяснение примера:

#navlist {position:relative;} - устанавливаем относительное позиционирование, чтобы потом внутри этого элемента можно было использовать абсолютное позиционирование
#navlist li {margin:0;padding:0;list-style:none;position:absolute;top:0;} - отступы (margin) и поля (padding) устанавливаем в 0, стиль списка (list-style) удаляем, а все элементы списка делаем абсолютно позиционируемыми
#navlist li, #navlist a {height:44px;display:block;} - задаем высоту всех изображений 44px

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

#home {left:0px;width:46px;} - элемент расположен полностью слева и его ширина 46px
#home {background:url(img_navsprites.gif) 0 0;} - определяем фоновое изображение и его местонахождение (слева 0px, сверху 0px)
#prev {left:63px;width:43px;} - элемент сдвинут на 63px вправо (46px ширины #home + дополнительное место между элементами списка), его ширина 43px
#prev {background:url('img_navsprites.gif') -47px 0;} - определяем фоновое изображение в 47px справа (46px от изображения для #home + 1px от разделителя)
#next {left:129px;width:43px;} - элемент сдвинут на 129px вправо (#prev начинается на 63px + 43px от #prev + дополнительное место), и его ширина 43px
#next {background:url('img_navsprites.gif') -91px 0;} - определяем фоновое изображение в 91px справа (46px от изображения для #home + 1px от разделителя + 43px от изображения для #prev + 1px от разделителя)

Спрайты изображений - Эффект при наведении мыши

Теперь к нашему списку ссылок навигации добавим эффект при наведении мыши.

Стоит сказать, что псевдокласс :hover можно использовать с любыми элементами, а не только с ссылками.

Наше новое спрайтовое изображение ("img_navsprites_hover.gif") содержит три изображения для навигации и три изображения для создания нужного эффекта:

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

Чтобы создать нужный эффект, достаточно к коду предыдущего примера добавить всего три строчки, а также заменить img_navsprites.gif на 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;
}

Результат:

Объяснение примера:

#home a:hover {background: url('img_navsprites_hover.gif') 0 -45px;} - для всех трех изображений для эффекта, мы определяем те же самые фоновые позиции, только смещенные на 45px вниз.