Зображення в якості посилання

Крім тексту, як посилань можна використовувати і малюнки. Зображення в цьому випадку треба помістити між тегами <a>і </a>, як показано в прикладі 1.

Приклад 1. Створення малюнка-посилання

<!DOCTYPE>
<html>
 <head>
  <meta charset=utf-8">
  <title>Посилання</title>
 </head>
 <body> 
   <p><a href="sample.html"><img src="images/sample.gif" width="50" 
   height="50" alt="Приклад"></a></p>
 </body> 
</html>

Атрибут href тега <a> задає шлях до документа, на який вказує посилання, а src тега <img> – шлях до графічного файлу.

Навколо зображення-посилання автоматично додається рамка товщиною один піксель і кольором, що збігається з кольором текстових посилань.

Щоб прибрати рамку, слід у тега <img> встановити атрибут border = “0” (приклад 2).

Приклад 2. Видалення рамки навколо зображення

<!DOCTYPE>
<html>
 <head>
  <meta charset=utf-8">
  <title>Посилання</title>
 </head>
 <body>
   <p><a href="sample.html"><img src="images/sample.gif" width="50" height="50" border="0" alt="Приклад"></a></p>
 </body> 
</html>

Можна також скористатися CSS, щоб прибрати рамку для всіх зображень, які є посиланнями. Для цього застосовується стильова властивість border cо значенням none (приклад 3).

Приклад 3. Використання CSS

<!DOCTYPE>
<html>
 <head>
  <meta charset=utf-8">
  <title>Посилання</title>
  <style type="text/css">
    A IMG { border: none; }
  </style>
 </head>
 <body>
  <p><a href="sample.html"><img src="images/sample.gif" width="50" height="50" alt="Приклад"></a></p>
 </body>
</html>

Конструкція A IMG визначає контекст застосування стилів – тільки для тега <img>, який знаходиться всередині контейнера <a>. Тому зображення в подальшому можна використовувати як зазвичай.

Залишити відповідь

Ваша e-mail адреса не оприлюднюватиметься. Обов’язкові поля позначені *

%d bloggers like this: