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