Применение и использование спрайта помогает сделать сайт более качественным и быстрым, можно найти множество способов использовать спрайт на благо своего сайта.

Спрайт — это один графический файл (изображение), объединяющий в себе несколько картинок, частей фона и т. п., благодаря определенному методу. От такого объединения очень много пользы:

Первое. При использовании спрайта браузеры могут четко и правильно отображать определенные элементы дизайна. Заказать дизайн сайта в нашей кузнице сайтостроения. Если используются кнопки-ролловеры, то спрайт незаменим. Без его использования понадобится две картинки: первая загрузится браузером при открытии страницы, а вторая начнет грузиться только при наведении указателя мыши на кнопку, а это скорее всего приведет к тому, что будет небольшая задержка до появления этой картинки — это не очень красиво.

Второе. Значительно легче задавать адресацию фоновых изображений в файле стилей. Ведь будет использоваться только одно изображение — спрайт. Нужно только для элементов сайта корректно указать местоположение и часть спрайта, которая будет видимой.

Третье. На самом деле это очень актуально и аккуратно. Разберемся в методе поподробнее. Есть одно изображение, в котором объединены элементы дизайна сайта. Например, спрайт кнопки (простое состояние, и состояние при наведении):

Заказать сайт под ключ на buyhtml.ru. Теперь, из этой кнопки картинки, нам нужно выделить одну. Для этого надо наложить своеобразный трафарет, который и выделит для нас требуемое изображение кнопки, в данном случае у нас одно изображение, потому будет легко это сделать:

Ну а как реализовать такую выборку на практике? Если учесть, что каждое изображение, входящее в спрайт, имеет собственную длину и высоту, так же оно находится на конкретном участке спрайта, то есть имеет определенные координаты.

Поэтому, чтобы показать браузеру, что именно нужно отобразить, достаточно указать координаты изображения и его размеры:

.button { background: url(images/button.png);width:250px;height:70px;display:block; }

Эта запись задает определенные размеры и указывает изображение фона для элемента с классом .button, то есть для интересующей нас кнопки.

Очень важна нижняя строчка: background-position: 0 -70px;

Ей мы показываем координаты нужного изображения. Они задаются для верхнего левого угла выбираемого изображения, так: первое число означает расстояние по горизонтали от левого края спрайта, второе — от верхнего края спрайта по вертикали. Получается, чтобы задать координаты, необходимо отсчитать число пикселей по вертикали и горизонтали от угла спрайта до угла выбираемого изображения и записать данные в правила.

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

Запись числа 70 со знаком «минус» поднимет весь спрайт на 70 точек вверх, размеры искомого изображения так же указаны, в итоге отобразится только кнопка:

.button:hover { background-position:0 -70px; }

Чтобы не считать пикселы пальцем, можно воспользоваться соответствующими инструментами в графических редакторах.