Спрайты

Приём, когда один рисунок меняется на другой при наведении на него курсора мыши, называется эффект перекатывания, или 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