Студия
создания сайтов
Работаем с 2009 года
ap@ap-web.ruandrew59rus (342)  204 - 48 - 69 (912)  884 - 80 - 87

Смена картинки при наведении мыши

Чтобы добиться приятного впечатления от сайта частенько используется такой эффект, как замена одной картинки на другую при наведении на неё курсора мыши.

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

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

Как это работает

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

ВНИМАНИЕ: браузер Internet Explorer версии 6 и ниже :hover работает только со ссылками, тогда как другие браузеры понимают :hover и для других элементов.

Так что для корректности и универсальности придётся помещать изображение внутрь контейнера <a></a>.
Сам рисунок добавляется и меняется с помощью стилевого свойства background.

Порядок действий такой.

  1. Готовятся два изображения одинакового размера, одно для исходного вида, а второе — для его замены при эффекте перекатывания (например: одно-темное, другое-светлое или одно цветное, а другое черно-белое).

  2. Исходная картинка (назавем её №1) добавляется в качестве фонового рисунка к селектору <а> через стилевое свойство background со значением url (URI), здесь URI — путь к графическому файлу на Вашем сервере.

  3. Присоединяем псевдокласс к селектору <A> и снова включаем свойство background, но в качестве значения указываем замещающее изображение  (назавем эту картинку №2).

  4. Чтобы ссылка была по размеру картинки, её следует превратить в блочный элемент с помощью свойства display со значением block, а также желательно задать высоту и ширину ссылки.

первый  и второй

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

Добавляем в Ваш файл стилей CSS класс rollover

/* Перекатывание Рисунка */

a.rollover { background: url (images/sun1.png); /* Путь к файлу с исходным рисунком №1 */
display: block; /* Рисунок как блочный элемент */
width: 196px; /* Ширина рисунка */
height: 183px; /* Высота рисунка */
}
a.rollover:hover { background: url (images/sun2.png); /* Путь к файлу с заменяемым рисунком №2 */
}

В коде html для вывода эффекта

<p><a href="#" class="rollover"> </a></p>

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

Эффект перекатывания с одной картинкой (не смешивайте с двухкартиночным примером)

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

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

Также, как и в первом случае добавляем в стили CSS класс rollover

a.rollover { background: url (images/mark.png); /* Путь к файлу с исходным рисунком */
display: block; /* Рисунок как блочный элемент */
width: 151px; /* Ширина рисунка в пикселах */
height: 40px; /* Высота рисунка */
}

a.rollover:hover { background-position: 0 -40px; /* Смещение фона */
}

В коде страницы для вывода:

<p><a href="link.html" class="rollover"></a></p>

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

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

, браузер

Отправьте заявку и мы с Вами свяжемся

Отправляя заявку Вы соглашаетесь на обработку своих персональных данных (подробнее)

Ваше имя* 
N телефона* 

Студия AP-Web
Наши контакты :

  • 614109, Россия, Пермь,
    ул. 5-я Каховская, д. 10-А, оф. 220
  • ap@ap-web.ruandrew59rus
  • +7 (342)  204 - 48 - 69 +7 (912)  884 - 80 - 87