Основы работы с XHTML и CSS
Графические ссылки
Ссылки можно инициировать графическими изображениями, помещая тег <img/> внутрь тега <a>. Общий формат присваивания ссылок графическим изображениям показан ниже.
<a href="url"><img src="url" alt="text"/></a>
Листинг 7.11. Общий формат графической ссылки (html, txt)
Изображения особенно эффективны для ссылок, так как с помощью информативной графики можно сразу сказать о назначении сайта. Ссылки, закодированные на листинге 7.12 и показанные на рисунке 7.9, созданы из изображений, полученных с соответствующих сайтов.
<style type="text/css"> img {border:0; vertical-align:middle} </style>
<p> <a href="http://www.ebay.com"><img src="ebay.jpg" alt="eBay Link"/></a> <a href="http://www.ebay.com">Ebay</a> </p>
<p> <a href="http://www.nascar.com"><img src="nascar.jpg" alt="NASCAR Link"/></a> <a href="http://www.nascar.com">NASCAR</a> </p>
<p> <a href="http://www.weather.com"><img src="weather.jpg" alt="Weather Link"/></a> <a href="http://www.weather.com">The Weather Channel</a> </p>
<p> <a href="http://www.microsoft.com"><img src="microsoft.jpg" alt="Microsoft Link"/></a> <a href="http://www.microsoft.com">Microsoft</a> </p>
Листинг 7.12. Код для создания графических и текстовых ссылок (html, txt)
Рис. 7.9. Графические и текстовые ссылки
По умолчанию графические ссылки окружены границей, чтобы указать, что это ссылка, - цель та же, что и у подчеркивания текстовых ссылок. В данном примере вывод границы подавляется в таблице стилей, задавая границу изображений толщиной 0px.
При использовании графических изображений в качестве ссылок желательно создавать также текстовые ссылки. В данном примере это сделано включением отдельных текстовых ссылок, которые выровнены по центру их соответствующих изображений с помощью свойства таблицы стилей vertical-align.
Вспомните, что удаленный сайт Web должен открываться в отдельном окне браузера, чтобы пользователь оставался в контакте с исходным сайтом. Приведенные выше ссылки модифицированы в следующем коде так, чтобы они открывались в новом окне браузера с помощью описанной ранее техники использования JavaScript.
<p> <a href="javascript:" onclick="open('http://www.ebay.com','','')"><img src="ebay.jpg" alt="eBay Link"/></a> <a href="javascript:" onclick="open('http://www.ebay.com','','')">Ebay</a> </p>
p#B {border:dashed 3px blue}
span#C {border:solid 4px green} </style>
<div id="A"> <p id="B">This is a <span id="C">text string with borders</span> inside a paragraph with borders inside a division with four different borders.</p> </div>
Листинг 6.22. Код для различных стилей границы (html, txt)
Рис. 6.7. Границы, окружающие элементы страницы
Так как охватывающий раздел выводит различные границы на каждой из четырех сторон, для каждой стороны заданы индивидуальные спецификации. Поскольку вокруг всех сторон и вложенного текста заданы одинаковые границы, для этих контейнеров задано сокращенное свойство границы. Хотя добавление границ к элементам страницы вряд ли будет использоваться слишком часто, этот пример показывает возможные настройки границы.
