Графические ссылки
Графические ссылки
Структура графической ссылки имеет вид:
<А Н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.
