Разделы

Эффект перекатывания

Смена одной картинки на другую при наведении на нее курсора мыши называется эффектом перекатывания. Обычно для создания эффекта перекатывания применяется JavaScript, но во многих случаях вполне достаточно и CSS.

Псевдокласс hover

Вначале разберем, как делается собственно сам эффект. Для этой цели используется псевдокласс hover, он через двоеточие добавляется к желаемому селектору. Этот псевдокласс определяет стиль элемента, когда на него наводится курсор мыши, что нам как раз и требуется. Сразу отметим, что в браузере Internet Explorer версии 6 и ниже hover работает только со ссылками, тогда как другие браузеры понимают hover и для других элементов. Так что для универсальности придется помещать изображение внутрь контейнера <A>. Сам рисунок добавляется и меняется с помощью стилевого атрибута background. Алгоритм действий следующий.

Готовится два изображения одинакового размера, одно для исходного вида, а второе — для его замены при эффекте перекатывания.
Исходная картинка добавляется в качестве фонового рисунка к селектору A через стилевой атрибут background со значением url('URI'), здесь URI — путь к графическому файлу.
Присоединяем псевдокласс к селектору A (a:hover) и снова включаем атрибут background, но в качестве значения указываем замещающее изображение.
Чтобы ссылка была по размеру картинки, ее следует превратить в блочный элемент с помощью атрибута display со значением block, а также задать высоту и ширину ссылки.

На рис. 1 приведены два изображения: исходное (рис. 1а) и замещающее (рис. 1б).

Рис. 1а а Рис. 1б б

Рис. 1. Картинки для создания эффекта перекатывания

Остается собрать весь код воедино, как показано в примере 1. Чтобы ссылка не вела на какой-то определенный файл, что в данном случае излишне, добавим «заглушку» в виде символа решетки (#) к параметру href тега <A>.

Пример 1. Использование псевдокласса hover

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
 <head>
  <meta http-equiv="content-type"  content="text/html; charset=windows-1251">
  <title>Эффект перекатывания</title>
  <style type="text/css">
   A.rollover {
    background: url(images/sun1.png); /* Путь к файлу с исходным рисунком  */
    display: block; /*  Рисунок как блочный элемент */
    width: 196px; /* Ширина рисунка */
    height: 183px; /*  Высота рисунка */

   }
   A.rollover:hover {
    background: url(images/sun2.png); /* Путь к файлу с заменяемым рисунком  */
   }
  </style>
 </head>
 <body>
  <p><a  href="#" class="rollover"> </a></p>
  </body>
</html>

Приведенный способ хотя и прост в реализации, но имеет определенный недостаток. Поскольку второй рисунок загружается только при наведении курсора на ссылку, то отображение картинки происходит с некоторой паузой. Для устранения этой задержки можно использовать не два изображения, а лишь одно.

Эффект перекатывания с одним рисунком

Казалось бы имеется противоречие, ведь эффект перекатывания состоит в замене одного рисунка на другой, как же тогда обойтись одной картинкой? На самом деле изображений будет два (рис. 2), но храниться они будут в одном графическом файле.

Рис. 2

Рис. 2. Изображение с двумя картинками

Смена одного рисунка на другой осуществляется сдвигом изображения по вертикали за счет использования универсального атрибута background или background-position, как показано в примере 2.

Пример 2. Изменение положения рисунка

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
 <head>
  <meta http-equiv="content-type" content="text/html; charset=windows-1251">
  <title>Эффект перекатывания</title>
  <style type="text/css">
   A.rollover {
    background: url(images/mark.png); /* Путь к файлу с исходным  рисунком */
    display: block; /* Рисунок как блочный элемент */
    width: 151px; /* Ширина рисунка в пикселах */
    height: 40px; /* Высота рисунка */
   }
   A.rollover:hover {
    background-position: 0 -40px; /* Смещение фона */
   }
  </style>
 </head>
  <body>
  <p><a href="link.html" class="rollover"></a></p>
 </body>
</html>

Для селектора A устанавливается фоновое изображение через атрибут background, ширина (width) совпадает с рисунком, а высота (атрибут height) равна половине высоты изображения. В итоге первоначально должна отображаться зеленая вкладка целиком.

При наведении на ссылку фон смещается вверх на половину высоты картинки (40 пикселов) с помощью background-position и становится видна оранжевая вкладка.

Прикрепленный файл	Размер
example178_1.zip	7.62 кб
example178_2.zip	4.13 кб

Разделы

Термины

Эффект перекатывания

Псевдокласс hover

Эффект перекатывания с одним рисунком

Отправить комментарий