5.3. Використання графіки в посиланнях

Посилання у виді текстових рядків зручні, тому що після провідин відповідних сторінок вони змінюють свій цвіт. Проте більш привабливо виглядають посилання, оформлені з використанням графічних зображень. Для виконання такого оформлення є дві можливості. По-перше, можна вставити між операторами <А> і </А> графічне зображення невеличкого розміру. При цьому воно буде використана як дошкульна область. Якщо зробити щиголь лівою клавішею миші по цій області, відбудеться завантаження об'єкта, зазначеного в посиланні.

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

Роздивимося обидві ці можливості.

5.3.1. Вставка графічного зображення в посилання

Зображення вставляется між операторами <А> і </А> за допомогою оператора <IMG>, наприклад:

<А HREF="http://www.dials.ccas.ru/frolov/home.htm">

<IMGSRC="httppage.gif"BORDER=O>

</A>

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

Графічні зображення можна розмістити в осередках таблиці. Можна розташувати в такому осередку і посилання, виконаний із використанням графіки. От, наприклад, як оформлена на сервері WWW посилання на архів вихідних текстів до 14-му тому серії книг "Бібліотека системного програміста":

<HTML>

<BODY BGCOLOR="#FFFFFF">

<Н2>Графічний інтерфейс GDI у Microsoft Windows</H2>

<P><ADDRESS>© Олександр Фролов, Григорій Фролов<ВR>Тому 14, М.: Диалог-МИФИ, 1994, 288 CTp.</ADDRESS><HR>

<TABLE>

<TR><TD>

<P><A HREF="http://www.dials.ccas.ru/frolov/bin/dbsp14.lzh"><IMGSRC="disk.aif"BORDER=0></A>

<BR></TD>

<ТD>Дискета з вихідними текстами програм, 208 Кбайт</ТD>

</TABLE>

</BODY>

</HTML>

У файлі disk. gif, як неважко догадатися, знаходиться зображення дискети. Зробивши щиголь по цьому зображенню, можна завантажити до себе архів вихідних текстів.

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

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

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

Тепер потрібно підготувати опис цих областей (карту областей), скориставшись для цього операторами <МАР> і </МАР>.

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

<МАР NAME="image_map">

<AREA...>

<AREA... >

</МАР>

Н ехай, наприклад, підготовлене графічне зображення, показане на мал. 5.1.

Мал. 5.1. Графічне зображення з трьома дошкульними областями buttons. gif

На цьому зображенні є 3 області у виді прямокутників із координатами, кожний із який має свій цвіт. Карта, що описує ці області, має такий вид:

<МАР 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 оператора <МАР> має значення buttons. Ця назва карти дошкульних областей, що буде використано при вставці сегментированного графічного зображення в документ HTML. Оператор <AREA> має три параметри: SHAPE, COORDS і HREF. Параметр SHAPE задає форму дошкульної області. Для цього параметра можна вказувати такі значення:

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

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

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

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

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

У параметрі USEMAP вказується ім'я карти дошкульних областей. Якщо ця карта розташовується в тому ж файлі, у якому знаходиться і посилання на сегментированное зображення, ім'я карти записується в параметрі USEMAP після символу #. Якщо ж карта знаходиться в окремому файлі (що припустимо), перед символом # необхідно зазначити ім'я файла, що містить карту:

<IMG SRC="biittons. 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>

<ТITLЕ>Сегментированная графіка для посилань</ТITLE>

</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" NOHRER>

</MAP>

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

</BODY>

</HTML>

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

Для чого найкраще використовувати сегментированную графіку? Найбільше очевидне застосування - використання посилань для опису окремих фрагментів складного зображення, такого, наприклад, як географічна карта, уява екрана працюючої програми і т.п.

Якщо усе, що необхідно зробити за допомогою сегментированной графіки, - це розміщення панелі з кнопками, то має сенс роздивитися варіант використання таблиці, в осередках якої знаходяться зображення окремих кнопок. Цей варіант гарний тим, що буде працювати навіть у таких навігаторах, що не спроможні розпізнавати сегментированную графіку (наприклад, навігатор NSCA Mosaic).

Був розглянутий варіант використання сегментированной графіки, коли карта дошкульних областей зберігається в документі HTML. Це найбільше простий засіб. Для повноти виклада можна зауважити, що існує ще один засіб роботи із сегментированной графікою, при якому інформація про дошкульні області зберігається на сервері. У курсі не буде розглядатися другий засіб, тому що він припускає використання більш складних методів.