Иллюстрированный самоучитель по Web-графике

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

Структура графической ссылки имеет вид:

<A HREF="адрес_ссылки"> <IMG SRC="имя_графического_файла">

Например, следующий тэг описывает ссылку на HTML-файл докум2 .htm, при этом ссылка на экране будет представлена картинкой из файла Iogotip.gif:

<A HREF="докум2.htm"> <IMG SRC="logotip.gif">

К графической ссылке можно добавить поясняющий текст, как это сделано ниже:

<A HREF="докум2.htm"> <IMG SRC="logotip.gif">Щелкните здесь</A>

В рассмотренных выше графических ссылках одной картинке соответствовал один адрес ссылки. Однако имеется и другая возможность. Она заключается в том, чтобы одной картинке сопоставить несколько ссылок, привязав каждую из них к некоторой области графического изображения. Такие области называют горячими, а сам технологический прием – графической картой ссылок или сегментированной графикой. Горячие области графической карты могут иметь различную форму: прямоугольную, многоугольную или в виде окружности. Это очень удобный прием оформления группы ссылок, однако при выборе картинки, служащей основой карты ссылок, следует стремиться к тому, чтобы границы горячих областей были хорошо очерченными и не пересекались.Кроме того, необходимо позаботиться о том, чтобы пользователь понял, что имеет дело с картой ссылок, а не просто с графическим фоном. Для этого можно использовать поясняющие тексты. При наведении на горячую область курсор мыши изменяет свою форму, как и при использовании обычных ссылок. При щелчке на горячей области ее границы становятся видимыми.

Графическая карта задается с помощью нескольких тэгов. Первым является тэг <МАР> (карта) с атрибутом NAME для указания имени карты. Имя карты выбирается как имя переменной. Далее, между тэгами <МАР> и </МАР> следуют тэги <AREA> (область) для задания горячих областей. Тэг <AREA> имеет ряд атрибутов, описывающих собственно ссылку, а также форму и положение горячей области:

  • HREF – строка, определяющая адрес ссылки;
  • SHAPE – определяет форму области; принимает аргументы:
  • "RECT" (прямоугольник);
  • "POLYGONS" (многоугольник);
  • "CIRCLE" (круг);
  • COORDS – координаты области, которые задаются в виде перечня чисел, разделенных запятыми; весь перечень заключается в кавычки (для прямоугольника задаются четыре числа – координаты верхнеголевого и правого нижнего угла; для многоугольника задаются координаты каждого угла; для круга задаются три числа – координаты центра и радиус);

После закрывающего тэга </МАР> следует указать тэг, вставляющий графическое изображение и реализующий привязку карты к нему, – это уже известный тэг <IMG>, в котором помимо прочих возможных атрибутов используется атрибут связи с картой:

USEMAP="#имя_карты"

В качестве имени карты указывается аргумент атрибута NAME тэга <МАР>.

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

<HTML>
  
<HEAD>
    <TITLE>Графическая карта</TITLE>
</HEAD>
<MAP NAME="mapO">
    <AREA HREF="северный.htm" SHAPE="RECT" COORDS="150.100.250.250">
    <AREA HREF="южный.htm" SHAPE="CIRCLE" COORDS=" 150.380.50">
</MAP>
<IMG SRC="KAPTA.JPG" USEMAP="#mapO" WIDTH=360 HEIGHT=480>
  
</HTML>

Графические карты ссылок обычно используются для создания красочных меню, а также в тех случаях, когда внешний вид страницы формируется с помощью графического редактора (например, Adobe Photoshop), в котором можно создать картинку со всеми необходимыми надписями и художественными элементами, – это альтернатива использованию множества тэгов, вставляющих различные элементы. Основная трудность здесь состоит в определении координат горячих областей. Однако если известны ширина и высота всего изображения, то координаты горячих областей можно рассчитать, хотя бы приблизительно, а затем уточнить опытным путем при отладке. Работа существенно упрощается при использовании такого средства проектирования Web-страниц, как FrontPage.

Если Вы заметили ошибку, выделите, пожалуйста, необходимый текст и нажмите CTRL + Enter, чтобы сообщить об этом редактору.