| Internet Explorer | Chrome | Opera | Safari | Firefox | Android | iOS |
| 6.0+ | 1.0+ | 4.0+ | 1.0+ | 1.0+ | 1.0+ | 1.0+ |
Завдання
Замінити одну картинку на іншу при наведенні на неї курсора миші.
Рішення
Зміна однієї картинки на іншу при наведенні на неї курсора миші називається ефектом перекочування. Зазвичай для створення ефекту перекочування застосовується JavaScript, але в більшості випадків цілком достатньо і CSS.
Псевдоклас :hover
Спочатку розберемо, як робиться власне сам ефект. Для цієї мети використовується псевдоклас :hover, він додається до бажаного селектору. Цей псевдоклас визначає стиль елементу, коли на нього наводиться курсор миші, що нам якраз і потрібно. Відразу зазначимо, що у браузері Internet Explorer версії 6 і нижче :hover працює тільки з посиланнями, тоді як інші браузери розуміють :hover і для інших елементів. Так що для універсальності доведеться розміщувати зображення всередину контейнера <a>. Сам малюнок додається і змінюється за допомогою стильового властивості background. Алгоритм дій наступний.
- Готуються два зображення однакового розміру, одне для вихідного виду, а друге — для його заміни при ефекті перекочування.
- Вихідна картинка додається в якості фонового малюнка до селектору A через стильове властивість background зі значенням url(URI), тут URI — шлях до графічного файлу.
- Приєднуємо псевдоклас до селектору A і знову включаємо властивість background, але в якості значення вказуємо заміщає зображення.
- Щоб посилання по розміру картинки, її слід перетворити на блочний елемент з допомогою властивості display зі значенням block, а також задати висоту і ширину посилання.
На рис. 1 наведено два зображення: вихідне (рис. 1а) і заміщає (рис. 1б).
а 
б
Рис. 1. Картинки для створення ефекту перекочування
Залишається зібрати весь код воєдино, як показано в прикладі 1. Щоб посилання не вела на якийсь певний файл, що в даному випадку надміру, додамо «заглушку» у вигляді символу решітки (#) до атрибуту href тега <a>.
Приклад 1. Використання псевдокласу :hover
HTML5CSS 2.1IECrOpSaFx
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Ефект перекочування</title>
<style>
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. Зображення з двома картинками
Зміна одного малюнка на інший відбувається зсув зображення по вертикалі за рахунок використання універсального властивості background або background-position, як показано в прикладі 2.
Приклад 2. Зміна положення малюнка
HTML5CSS 2.1IECrOpSaFx
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Ефект перекочування</title>
<style>
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 і стає видно помаранчева вкладка.