Листинг 5.1. Файл chap5\local. htm

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 3.2//EN">

<HTML>

<HEAD>

<ТIТLЕ>Локальні посилання в документі HTML</TITLE>

</HEAD>

<P><A НRЕF="lосаl.htm#tаЬ1_1">Таблиця з подвійним заголовком</А>

<Р><А НRЕF="lосаl.htm#tab1_2">Таблиця з подвійним заголовком і підписом</А>

<Н2><А NАМЕ="tаЬ1_1">Таблиця з подвійним заголовком</А></Н2>

<CAPTION VALIGN=TOP ALIGN=RIGHT>Ta6л. 1.1. Таблиця з подвійним заголовком</ САРТION>

<TR><TH COLSPAN=3>3aгoлoвок для всіх стовпчиків</ТН></ТR>

<TR><TH COLSPAN=2>Cтoлбцы 1 і 2</ТН><ТН>Стовпчик 3</TH></TR> <TR><TD>000</TD><TD>001</TD><TD>002</TD></TR>

</TABLE>

<H2><A NAME="tab1 2">Таблиця з подвійним заголовком і підписом</А></Н2>

<CAPTION ALIGN=BOTTOM>Ta6л. 1.2. Таблиця з подвійним заголовком</CAPTION>

<TR><TH COLSPAN=3>3aгoлoвок для всіх стовпчиків</ТН></ТR>

<TR><TH COLSPAN=2>Cтoлбцы 1 і 2</ТН><ТН>Стовпчик 3</TH></TR>

</TABLE>

</BODY>

</HTML>

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

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

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

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

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>

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

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

<TABLE>

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

</TABLE>

</BODY>

</HTML>

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

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

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

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

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

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

<МАР NAME="image_map">

<AREA...>

<AREA... >

</МАР>

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

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

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

<МАР NAME="buttons">

</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:

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

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

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