Спрайты

Приём, когда один рисунок меняется на другой при наведении на него курсора мыши, называется эффект перекатывания, или rollover. Смену картинок можно сделать с помощью скриптов или стилей, но нужно помнить о некоторых моментах:

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

Чтобы избавиться от этих недочётов все изображения вставляют в одну общую картинку, которая и называется спрайтом. Вывод самого изображения происходит как фон через свойство background, а смена картинки делается за счёт сдвига фона с помощь background-position. На рис. 1 показан спрайт с несколькими картинками.

Спрайт

Рис. 1. Спрайт

Здесь используется два набора изображений — сердечки и чекбоксы. Располагать близкие картинки можно как горизонтально, так и вертикально, это не является принципиальным. Для каждого набора в коде создаём свой собственный класс и для него указываем размеры элемента, совпадающие с размерами картинки, в данном случае это 64х64 пикселя. Затем добавляем спрайт в виде фона и при необходимости сдвигаем его через background-position (пример 1).

Пример 1. Смена картинки при наведении указателя

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Спрайты</title> <style> .heart, .checkbox { width: 64px; height: 64px; /* Размеры картинок */ background: url(/example/image/sprite.png) no-repeat; /* Спрайт */ display: inline-block; /* Выстраиваем по горизонтали */ } .heart:hover { background-position: 0 -64px ; /* Сдвигаем вверх */ } .checkbox { background-position: -64px 0; /* Сдвигаем влево */ } .checkbox:hover { background-position: -64px -64px; /* Сдвигаем влево и вверх */ } </style> </head> <body> <div class="heart"></div> <div class="checkbox"></div> </body> </html>

Результат данного примера показан на рис. 2. Куда сдвигать фон — влево или вверх, зависит от исходного расположения картинок.

Смена картинки при наведении на неё курсора мыши

Рис. 2. Смена картинки при наведении на неё курсора мыши

Сложности у этого метода начинаются, когда в спрайт требуется объединить больше четырёх картинок, да ещё и разного размера. Смена размера, замена существующих картинок и добавление новых в спрайте приводит к повальной смене и кода CSS. Так что лучше пользоваться специальными программами вроде TexturePacker, она сама объединит все рисунки в один и выдаст готовый CSS. К сожалению, эта программа платная, но для ознакомления доступна полнофункциональная пробная версия на 30 дней.

Автор: Влад Мержевич
Последнее изменение: 14.02.2024