На заметку: если вам кто скажет в будущем, что лучше использовать отдельные граф. файлы, т.к. они быстрее грузятся, не верьте.

Итак, что же можно сделать с этим?
Приведу простой пример: все ведь хотели, чтобы рядом ссылкой была иконка, которая меняется на другую иконку при наведении? Аха? Ну так не надо заморачиваться с JavaScript, это нудно и некрасиво. Делаем проще. Пусть есть ссылка

Соответственно класс .sprite отвечает за загрузку картинки и отступ для текста.
background-position: 0px -177px; — прокручивает нашу картинку до нужного места.

Этот способ наиболее экономичен, не надо придумывать всяких «предзагруженных картинок», чтобы пользователь ощущал себя комфортно на вашем сайте. Не нужен никакой JavaScript. За вас всё делает CSS.

Ну и, конечно же, пример: ../sprite/sprite.html

Кнопки, Спрайты, css

• CSS спрайты
• Динамика CSS
• Скрытые данные
• Юзабельность: Форма входа