Опубликован: 19.03.2007 | Доступ: свободный | Студентов: 4619 / 1143 | Оценка: 4.23 / 3.94 | Длительность: 23:37:00
Лекция 7:

Соединение страниц

Графические ссылки

Ссылки можно инициировать графическими изображениями, помещая тег <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. Код для создания графических и текстовых ссылок
Графические и текстовые ссылки

Рис. 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. Код для открытия графических и текстовых ссылок в отдельном окне браузера
Елена Сапегова
Елена Сапегова

После прохождения теоретической части пришло письмо об окончании теоретической части курса, будет ли практическая часть?

Владислав Нагорный
Владислав Нагорный

Подскажите, пожалуйста, планируете ли вы возобновление программ высшего образования? Если да, есть ли какие-то примерные сроки?

Спасибо!