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

Итак, для тех, кто не знает, CSS-спрайт — это одно изображение, которое состоит из нескольких маленьких картинок, которые показываются как бы по отдельности в зависимости от действий пользователя. Вот то изображение, которое я буду использовать в своих примерах, по нему сразу становится понятно, что такое CSS-спрайт:

Сразу поясню, для каких целей использовались именно эти картинки. В ряд идут различные пиктограммы, означающие:
1. Завтрак
2. Кафе, ресторан
3. Кондиционер
4. Конференц зал
5. Интернет
6. Фен
7. Джакузи
8. Микроволновка
9. Мини-кухня
10. Парковка
11. Телефон
12. Услуги офиса
13. Холодильник
14. Курить в номере
15. Чайник
16. Телевизор
17. Утюг
18. Ванна
19. Удобства в номере
20. Проживание с животными
Для каждой существует два варианта: в зеленом и в коричневом исполнении. Задумка такова, что по-умолчанию, пиктограмма коричневая, но при наведении курсора мышки на картинку или на соответствующий ей текст или чекбокс, картинка должна меняться на зеленую.
Мне лично для реализации такой задумки сразу в голову пришла только одна идея: запихнуть каждую строчку в отдельный
и повесить на этот
события onmouseover и onmouseout, а скриптами менять src свойство картинки, меняя коричневую за зеленую и обратно. Конечно же, предварительно надо сохранить каждую пиктограмму в отдельный файл, назвав их 01-brown.png, 01-green.png и так далее…
Ну, собственно именно так я и сделал, получив 40 строк кода и 20 картинок. Но потом мне рассказали про CSS-спрайты.
Самым существенным преимуществом использования спрайтов является однократная загрузка сервером сразу всех элементов в одном файле. Многие считают что загрузка маленьких, мало весящих картинок не сказывается на производительности сайта. Но это не так — случае отдельных изображений увеличивается количество HTTP-запросов. Также, при использование единого спрайта позволяет уменьшить вес графики. В разработке страницы я использовал псевдокласс :hover с свойством background-position.
Более подробно и с примерами, работа данного приема описана и .Нет смысла переписывать статьи. Я лишь продемонстрирую, каким образом я сделал свой список, вы можете скачать архив с исходным файлом (Скачать CSS-спрайты: ) и разобрать самостоятельно, либо