Основы работы с 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> <a href="javascript:" onclick="open('http://www.nascar.com','','')"><img src="nascar.jpg" alt="NASCAR Link"/></a> <a href="javascript:" onclick="open('http://www.nascar.com','','')">NASCAR</a> </p>

<p> <a href="javascript:" onclick="open('http://www.weather.com','','')"><img src="weather.jpg" alt="Weather Link"/></a> <a href="javascript:" onclick="open('http://www.weather.com','','')">The Weather Channel</a> </p>

<p> <a href="javascript:" onclick="open('http://www.microsoft.com','','')"><img src="microsoft.jpg" alt="Microsoft Link"/></a> <a href="javascript: " onclick="open('http://www.microsoft.com','','')">Microsoft</a> </p>

Листинг 7.13. Код для открытия графических и текстовых ссылок в отдельном окне браузера (html, txt)


Содержание раздела