Как сделать, чтобы картинка менялась при наведении на нее курсора мыши?

🕛 19.01.2009, 19:20

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

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

<A>

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

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

<A>

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

HTML 4.01CSS 2.1IE 6IE 7Op 9.5Sa 3.1Ff 3.0

<!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), но храниться они будут в одном графическом файле.

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

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

HTML 4.01CSS 2.1IE 6IE 7Op 9.5Sa 3.1Ff 3.0

<!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 и становится видна оранжевая вкладка.