Книга: HTML, XHTML и CSS на 100%

Ссылки изображения

Ссылки изображения

Используя картинки, можно повысить функциональность сайта, создавая изображения-ссылки.

Ссылки – главное в Интернете, и, естественно, существует возможность использовать в качестве ссылок изображения.

Для создания ссылки из картинки достаточно поместить элемент IMG внутри тегов <А> и </A>, при этом вокруг картинки появится рамка, которой можно управлять с помощью атрибута border. Синие рамки вокруг рисунков выглядят некрасиво, зато с ними сразу понятно, что можно щелкнуть кнопкой мыши на этой картинке и перейти на другую страницу.

В листинге 4.9 приведены примеры создания ссылок-изображений с различными размерами рамок.

Листинг 4.9. Создание изображений-ссылок

<html>

<head>

<title>Встраивание изображения</title>

</head>

<body>

Ссылка без задания атрибута border (рамка ставится по умолчанию)<br/>

<a href="image.jpg"><img src="image.jpg" width="100" vspace="10" hspace="10" alt="Фотография карликового вислоухого кролика" /> </a><br />

Ссылка без рамки<br/>

<a href="image.jpg"><img src="image.jpg" width="100" vspace="10" hspace="10" alt="Фотография карликового вислоухого кролика " border="0" /> </a><br />

Рамка в 10 пикселов<br/>

<a href="image.jpg"><img src="image.jpg" width="100" vspace="10" hspace="10" alt="Фотография карликового вислоухого кролика " border="10" /> </a><br/>

</body>

</html>

Результат обработки кода из листинга 4.9 можно увидеть на рис. 4.10.


Рис. 4.10. Изображения-ссылки

Возможность делать из рисунков ссылки позволяет удобнее размещать информацию на сайтах, где необходимо использовать много изображений.

Оглавление книги

Оглавление статьи/книги
Похожие страницы

Генерация: 0.740. Запросов К БД/Cache: 3 / 0
поделиться
Вверх Вниз