www html, html уроки, html теги, css, верстка
Уроки книги по css и html урокам вопросы и ответы Помощь сайту дизайн-студия Шутовой Елены
Главная страница > Уроки > Ссылки > Изображение в качестве ссылки

Изображение в качестве ссылки

контентовая версия  

Кроме контента, в качестве ссылок можно использовать и рисунки. Изображение в этом случае надо поместить между тегами <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.ШТМЛ"><img src="sample.gif" width="50" height="50" alt="Пример"></a></p>
</body>
</html>

Параметр href тега <A> задает путь к файлу, на который указывает ссылка, а src тега <IMG> — путь к графическому файлу.

Вокруг Имаги-ссылки автоматически добавляется рамка толщиной один пиксел и цветом, совпадающим с цветом контентовых ссылок.

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

Пример 2. Удаление рамки вокруг Имаги

Валидный HTML
<!DOCTYPE ШТМЛ PUBLIC "-//W3C//DTD ШТМЛ 4.01 Transitional//EN" "http://www.w3.org/TR/ШТМЛ4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<title>Ссылка</title>
</head>
<body>
<p><a href="sample.ШТМЛ"><img src="sample.gif" width="50" height="50" border="0" alt="Пример"></a></p>
</body>
</html>

Можно также применить CSS (ЦСС), чтобы убрать рамку для всех рисунков, которые являются ссылками. Для этого применяется стилевой параметр border cо значением none (пример 3).

Пример 3. Использование CSS (ЦСС)

Валидный HTML
<!DOCTYPE ШТМЛ PUBLIC "-//W3C//DTD ШТМЛ 4.01 Transitional//EN" "http://www.w3.org/TR/ШТМЛ4/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.ШТМЛ"><img src="sample.gif" width="50" height="50" alt="Пример"></a></p>
</body>
</html>

Конструкция A IMG определяет конконтент применения стилей — только для тега <IMG>, который находится внутри контейнера <A>. Поэтому Имаги в дальнейшем можно использовать как обычно — с рамкой или без.

Статья опубликована: 07.09.2009 Последнее обновление: 25.02.2009
Поиск по сайту
Ссылки
Разделы
Теги по теме

A
Тег A является одним из важных элементов ШТМЛ и предназначен для разработки ссылок. В зависимости от присутствия параметров name или href тег A устанавливает ссылку или якорь.

IMG
Тег IMG предназначен для отображения на web-странице рисунков в графическом формате GIF, JPEG или PNG.

CSS (ЦСС) по теме

border
Параметр позволяет одновременно установить толщину, стиль и цвет рамки вокруг элемента. Значения могут идти в любом порядке, разделяясь пробелом, браузер сам определит, какое из них соответствует нужному атрибуту.

Copyright 2009 Все права защищены

О нашем Internet проекте | Наши планы | Контент нашего сайта | Есть ошибки... | Технологии | Поддержать проект