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

         

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


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

<А НREF="адрес_ссылки"> <IMG SRS="имя_графического_файла">

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

<А НREF="докум2.htm"> <IMG SRC="logotip.gif "

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

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

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

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




  • HREF — строка, определяющая адрес ссылки;


  • SHAPE — определяет форму области; принимает аргументы:


  • "RECT" (прямоугольник);




  • "POLYGONS" (многоугольник);


  • "CIRCLE" (круг);


  • COORDS — координаты области, которые задаются в виде перечня чисел, разделенных запятыми; весь перечень заключается в кавычки (для прямоугольника задаются четыре числа — координаты верхнеголевого и правого нижнего угла; для многоугольника задаются координаты каждого угла; для круга задаются три числа — координаты центра и радиус);


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

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

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

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

    <HTML>

    <НЕАD><ТITLЕ>Графическая карта</ТITLЕ> </НЕАD>

    <МАР 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.


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