Lecture
Соединение страниц
Графические ссылки
Ссылки можно инициировать графическими изображениями, помещая тег <img/> внутрь тега <a>. Общий формат присваивания ссылок графическим изображениям показан ниже.
<a href="url"><img src="url" alt="text"/></a>Листинг 7.11. Общий формат графической ссылки
Изображения особенно эффективны для ссылок, так как с помощью информативной графики можно сразу сказать о назначении сайта. Ссылки, закодированные на листинге 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.
Код для создания графических и текстовых ссылок
По умолчанию графические ссылки окружены границей, чтобы указать, что это ссылка, - цель та же, что и у подчеркивания текстовых ссылок. В данном примере вывод границы подавляется в таблице стилей, задавая границу изображений толщиной 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.
Код для открытия графических и текстовых ссылок в отдельном окне браузера