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

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

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

Дійсний HTML
<! 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>
</ Head>
<Body>
<P> <a href="sample.html"> <img src = "sample.gif" width = "50" height = "50" alt = "Приклад"> </a> </ p>
</ Body>
</ Html>

Параметр href тега <A> задає шлях до документа, на який вказує посилання, а src тега <IMG> - шлях до графічного файлу.

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

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

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

Дійсний HTML
<! DOCTYPE HTML PUBLIC "- // W3C // DTD HTML 4.01 Transitional // EN" "http://www.w3.org/TR/html4/loose.dtd">
<Html>
<Head>
<Meta http-equiv = "Content-Type" content = "text / html; charset = windows-1251">
<Title> Посилання </ title>
</ Head>
<Body>
<p> <a href="sample.html"> <img src = "sample.gif" width = "50" height = "50" border = "0" alt = "Приклад"> </a> </ p >
</ Body>
</ Html>

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

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

Дійсний HTML
<! DOCTYPE HTML PUBLIC "- // W3C // DTD HTML 4.01 Transitional // EN" "http://www.w3.org/TR/html4/loose.dtd">
<Html>
<Head>
<Meta http-equiv = "Content-Type" content = "text / html; charset = windows-1251">
<Title> Посилання </ title>
<Style type = "text / css">
A IMG {border: none; }
</ Style>
</ Head>
<Body>
<P> <a href="sample.html"> <img src = "sample.gif" width = "50" height = "50" alt = "Приклад"> </a> </ p>
</ Body>
</ Html>

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

Copyright що кредитують © www.htmlbook.ru