| Internet Explorer | Chrome | Opera | Safari | Firefox | Android | iOS |
| 4.0+ | 1.0+ | 4.0+ | 1.0+ | 1.0+ | 1.0+ | 1.0+ |
Завдання
Змінити колір рамки навколо зображень-посилань.
Рішення
Рамка навколо зображення з'являється в тому випадку, коли до тегу <img> додається атрибут border з ненульовим значенням і при створенні зображення-посилання. При цьому тег <img> зберігається всередині контейнера <a>. Незалежно від ситуації колір рамки встановлюється автоматично, проте через стилі можна задати будь-який бажаний колір кордону.
За замовчуванням колір рамки навколо зображень-посилань збігається з кольором текстових посилань. В стилях досить використовувати властивість border, додаючи його до конструкції a img, яка повідомляє, що рамку слід відображати тільки зображень, що знаходяться всередині контейнера <a> (приклад 1).
Приклад 1. Колір рамки
HTML5CSS 2.1IECrOpSaFx
<!DOCTYPE html>
<HTML>
<head>
<meta charset= "utf-8">
<title>Зображення-посилання</title>
<style>
a img {
border: 3px solid #c79316; /* Рамка навколо посилань */
}
a:visited img {
border: 3px solid #c716bd; /* Рамка навколо відвіданих посилань */
}
</style>
</head>
<body>
<p>
<a href="photo1.html"><img src="images/thumb1.jpg" alt="Фотографія 1"></a>
<a href="photo2.html"><img src="images/thumb2.jpg" alt="Фотографія 2"></a>
</p>
</body>
</html>
Результат цього прикладу показано на рис. 1. Щоб колір рамки змінювався при відвідуванні посилання, у прикладі використовується псевдоклас :visited.
Рис. 1. Колір рамки навколо посиланнь, одне з яких відвідали, а інше - ні