5 ССЫЛКИ В ДОКУМЕНТАХ HTML

Сервер Web своими руками. Язык HTML, приложения CGI и ISAPI, установка серверов Web для Windows

Использование графики в ссылках

Ссылки в виде текстовых строк удобны, так как после посещения соответствующих страниц они меняют свой цвет. Однако более привлекательно выглядят ссылки, оформленные с использованием графических изображений.

Для выполнения такого оформления у вас есть две возможности.

Во-первых, вы можете вставить между операторами <A> и </A> графическое изображение небольшого размера. При этом оно будет использовано как чувствительная область. Если сделать щелчок левой клавишей мыши по этой области, произойдет загрузка объекта, указанного в ссылке.

Во-вторых, для организации ссылок можно применить так называемые сегментированные графические изображения (image maps). Такие изображения разделяются на несколько чувствительных областей, с каждой из которых при помощи отдельного текстового файла связывается та или иная ссылка.

Рассмотрим обе эти возможности.

Вставка графического изображения в ссылку

Это очень просто. Вы вставляете изображение между операторами <A> и </A> с помощью оператора <IMG>, например:


<A HREF="http://www.dials.ccas.ru/frolov/home.htm" <IMG>SRC="homepage.gif" BORDER=0></A>

Здесь на месте ссылки в документе появляется графическое изображение, записанное в файле homepage.gif. Если сделать щелчок левой клавишей мыши по этому изображению, в окно навигатора будет загружен документ, имеющий адрес http://www.dials.ccas.ru/frolov/home.htm. Обратите также внимание на то, что мы убрали рамку вокруг графического изображения, указав значение параметра BORDER, равное нулю.

Графические изображения можно разместить в ячейках таблицы. Вы можете расположить в такой ячейке и ссылку, выполненную с использованием графики. Вот, например, как оформлена на нашем сервере WWW ссылка на архив исходных текстов к 14 тому нашей серии книг “Библиотека системного программиста”:


<HTML>
  <BODY BGCOLOR="#FFFFFF">
    <H2>Графический интерфейс GDI в Microsoft Windows</H2>
    <P><ADDRESS>&copy; Александр Фролов, Григорий Фролов<BR>
Том 14, М.: Диалог-МИФИ, 1994, 288 стр.</ADDRESS>
    <HR>
    <TABLE>
      <TR>
        <TD>
          <P><A HREF="http://www.dials.ccas.ru/frolov/bin/dbsp14.lzh"
<IMG>SRC="disk.gif" BORDER=0></A>
          <BR>
        </TD>
        <TD>Дискета с исходными текстами программ, 208 Кбайт</TD>
      </TABLE>
. . .
  </BODY>
</HTML>

В файле disk.gif, как нетрудно догадаться, находится изображение дискеты. Сделав щелчок по этому изображению, вы сможете загрузить к себе архив исходных текстов.

Сегментированная графика

Для того чтобы сделать сегментированное графическое изображение, вам не потребуются специальные графические редакторы. Вы можете воспользоваться любым редактором, способным сохранять изображение в формате GIF.

Нарисовав изображение, определите координаты чувствительных областей, которые будут использованы для ссылок (в пикселах). Каждое изображение может содержать произвольное количество чувствительных областей.

Теперь вам нужно подготовить описание этих областей (карту областей), воспользовавшись для этого операторами <MAP> и </MAP>.

Оператор <MAP> имеет один параметр - имя карты чувствительных областей сегментированного графического изображения. Между операторами <MAP> и </MAP> располагаются операторы <AREA…>, параметры которых описывают отдельные чувствительные области:


<MAP NAME="image_map">
  <AREA...>
  <AREA...>
</MAP>

Пусть, например, мы подготовили графическое изображение, показанное на рис. 5.1.

Рис. 5.1. Графическое изображение с тремя чувствительными областями buttons.gif

На этом изображении имеются три области в виде прямоугольников с координатами, каждый из которых имеет свой цвет. Карта, описывающая эти области, имеет следующий вид:


<MAP NAME="buttons">
  <AREA SHAPE="RECT" COORDS="10,10,30,20" HREF="blue.htm">
  <AREA SHAPE="RECT" COORDS="10,30,30,40" HREF="yellow.htm">
  <AREA SHAPE="RECT" COORDS="40,10,60,40" HREF="red.htm">
</MAP>

Параметр NAME оператора <MAP> имеет значение buttons. Это название карты чувствительных областей, которое будет использовано при вставке сегментированного графического изображения в документ HTML.

Оператор <AREA> имеет три параметра: SHAPE, COORDS и HREF.

Параметр SHAPE задает форму чувствительной области. Для этого параметра вы можете указывать следующие значения:

Значение параметра SHAPE	Форма чувствительной области
RECT	Прямоугольная область. Параметр COORDS задает координаты верхнего левого и правого нижнего углов области
CIRC	Окружность. Через параметр COORDS передаются три значения: координата центра окружности по оси X, координата центра окружности по оси Y, и радиус окружности
POLY	Многоугольник. Параметр COORDS задает координаты вершин многоугольника в виде пар значений

Параметр HREF оператора MAP задает адрес URL объекта, который должен быть загружен, когда пользователь делает щелчок левой клавишей мыши по чувствительной области.

Дополнительно с помощью параметра NOHREF можно указать области, нечувствительные к щелчкам мыши.

После того как вы создали карту чувствительных областей, можно вставлять сегментированное изображение в документ HTML. Эта процедура выполняется с помощью оператора <IMG>, для которого дополнительно указывается параметр USEMAP:


<IMG SRC="buttons.gif" BORDER=0 USEMAP="#buttons">

В параметре USEMAP указывается имя карты чувствительных областей. Если эта карта располагается в том же файле, что и ссылка на сегментированное изображение, имя карты записывается в параметре USEMAP после символа #. Если же карта находится в отдельном файле (что допустимо), перед символом # необходимо указать имя файла, содержащего карту:


<IMG SRC="buttons.gif" BORDER=0 USEMAP="map.htm#buttons">

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

В листинге 5.2 мы привели исходный текст документа HTML, в котором используется сегментированная графика.

Листинг 5.2. Файл chap5\imgmap\imgmap.htm


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 3.2//EN">
<HTML>
  <HEAD>
    <TITLE>Сегментированная графика для ссылок</TITLE>
  </HEAD>
  <BODY BGCOLOR=#FFFFFF>
    <MAP NAME="buttons">
      <AREA SHAPE="RECT" COORDS="10,10,30,20" HREF="blue.htm">
      <AREA SHAPE="RECT" COORDS="10,30,30,40" HREF="yellow.htm">
      <AREA SHAPE="RECT" COORDS="40,10,60,40" HREF="red.htm">
      <AREA SHAPE="RECT" COORDS="0,0,70,50" NOHREF>
    </MAP>
    <IMG SRC="buttons.gif" BORDER=0 USEMAP="#buttons">
  </BODY>
</HTML>

Этот документ ссылается на графический файл buttons.gif, показанный на рис. 5.1. Обратите внимание, что последний оператор <AREA> описывает всю поверхность изображения, как нечувствительную к щелчкам мыши. Тем не менее, области, описанные ранее другими операторами <AREA>, будут работать в качестве чувствительных областей. Это происходит потому, что если области перекрываются, то навигатор использует первое описание, которое встретилось в карте.

Для чего лучше всего использовать сегментированную графику?

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

Если все, что вы собираетесь сделать при помощи сегментированной графики - это размещение панели с кнопками, то имеет смысл рассмотреть вариант использования таблицы, в ячейках которой находятся изображения отдельных кнопок. Этот вариант хорош тем, что будет работать даже в таких навигаторах, которые не способны распознавать сегментированную графику (например, навигатор NSCA Mosaic).

Мы рассмотрели вариант использования сегментированной графики, когда карта чувствительных областей сохраняется в документе HTML. Это наиболее простой способ. Для полноты изложения заметим, что существует еще один способ работы с сегментированной графикой, при котором информация о чувствительных областях хранится на сервере. В нашей книге мы не будем рассматривать второй способ, так как он предполагает использование более сложных методов.

Приложение Map This!

Описанная выше методика подготовки сегментированных графических изображений не слишком удобна, так как вам необходимо вручную создавать карту чувствительных областей. Между тем вы можете бесплатно загрузить из Internet приложение Map This!, созданное специально для работы с сегментированной графикой. Ниже мы привели адрес сервера WWW, где вы можете получить самую свежую версию приложения Map This!:


http://www.ecaetc.ohio-state.edu/tc/mt

Главное окно этого приложения показано на рис. 5.2.

Рис. 5.2. Главное окно приложения Map This!

В приложение Map This! встроен редактор областей, позволяющий задавать чувствительные области визуально при помощи мыши. При этом вы просто рисуете границы областей поверх изображения.

Органы управления, расположенные на инструментальной линейке, позволяют вам выбрать нужную форму области - прямоугольную, круглую или многоугольную.

Помимо редактирования областей, приложение Map This! может автоматически создавать карту областей в одном из трех форматов, в частности, в формате, необходимом для включения карты в документ HTML.

Работая со списком областей, вы можете указать для каждой области адрес URL объекта, на который при помощи этой области создается ссылка. Список областей можно редактировать, изменяя адрес ссылки, добавляя в список новые области или удаляя существующие.

Ниже мы привели сокращенный образец документа HTML, который был создан приложением Map This! для изображения, входящего в комплект этого приложения:


<BODY>
<MAP NAME="Country Lake">
<!-- #$-:Image Map file created by Map THIS! -->
<!-- #$-:Map THIS! free image map editor by Todd C. Wilson -->
<!-- #$-:Please do not edit lines starting with "#$" -->
<!-- #$VERSION:1.30 -->
<!-- #$DESCRIPTION:Just a test map to show what can be done without resorting -->
<!-- #$DESCRIPTION:to lots of writing down points and wasting time. -->
<!-- #$AUTHOR:Todd Wilson -->
<!-- #$DATE:Thu Feb 06 10:11:27 1997 -->
<!-- #$PATH:C:\Program Files\MapThis\Examples\ -->
<!-- #$GIF:LAKE.GIF -->
<AREA SHAPE=RECT COORDS="213,296,289,336" HREF="door.html">
<AREA SHAPE=CIRCLE COORDS="499,355,14" HREF="liferaft.html">
<AREA SHAPE=POLY COORDS="637,362,551,366,550,373,545,375,448,366,371,
367,347,367,336,367,293,356,256,352,0,356,0,477,640,478,637,365,637,362,637,362" 
HREF="lake.html">
<AREA SHAPE=RECT COORDS="125,308,167,335" HREF="lunch.htm" 
ALT="Table">
<AREA SHAPE=RECT COORDS="350,335,539,365" HREF="boat.html">
. . .
<AREA SHAPE=RECT COORDS="332,275,362,323" HREF="lady.htm" 
ALT="The lady in the pink shirt">
<AREA SHAPE=RECT COORDS="86,205,289,339" HREF="house.html">
<AREA SHAPE=RECT COORDS="292,261,325,328" HREF="house.html">
<AREA SHAPE=POLY COORDS="97,173,88,199,290,201,283,174,97,173,97,173" 
HREF="roof.html">
<AREA SHAPE=POLY COORDS="292,225,292,259,332,257,319,228,292,228,294,224,
292,225,292,225" HREF="roof.html">
<AREA SHAPE=POLY COORDS="0,136,81,197,80,335,0,335,0,216,0,136,0,136" 
HREF="mountain.html" ALT="the left mountain">
. . .
<AREA SHAPE=default HREF="tryagain.html">
</MAP></BODY>

Как видите, это практически готовый документ, содержимое которого можно использовать для создания собственного документа HTML с сегментированной графикой.