Активні зображення (image maps), або зображення, що почувають щиглики миші, дозволять вам створити на своєму вузлі графічні меню довільної форми. Користуючись таким меню, читачі зможуть подорожувати по всіх закутках і проспектам вашого Web-вузла. Активне зображення - це просто картинка з так званими активними областями (hot spots), які посилаються на URL інших сторінок або вузлів. Працює таке зображення наступним чином: коли користувач клацає мишкою на зображенні, визначеної як активне зображення за допомогою атрибута ISМАР в тезі IMG, координати клацання передаються на Web-сервер. Сервер шукає в карті (mapfile) активну область, яка містить передані координати. Якщо така область знаходиться, заданий в карті URL активується, і броузер користувача переходить на нову сторінку.
За допомогою активних зображень ви можете вирішити відразу два завдання: створити меню свого Web-вузла і розмістити на ньому графіком.
Залежно від того, на які браузери ви орієнтуєтеся, вам може знадобитися доступ до каталогу cgi-bin на вашому Web-сервері. Можливо, вам доведеться попросити у адміністратора свого Web-сервера дозволу записати туди файли. Проте, розміщувати активні зображення дуже легко. Процес їх створення може спочатку здатися важким, але існують доступні програми, за допомогою яких для конструювання таких зображень досить вказати мишкою кордону активних областей і задати кожної з них свій URL.
Де поміщати активне зображення: на сервері або у клієнта?
Є два типи активних зображень: на сервері і, новий різновид, у клієнта. Зображення першого типу використовують сервер для того, щоб знайти відповідний даної активної області URL і передати на броузер потрібну сторінку. Активні зображення, що працюють на клієнтській машині, задають інформацію про активну області на НТМ-сторінці, так що броузер сам з'ясовує, які області є активними, і запитує з сервера необхідну сторінку.
Активні зображення, що працюють у клієнта, мають кілька переваг. По-перше, сторінки з ними можна перенести на інший сервер. По-друге, серверу не доводиться виконувати зайву роботу (наприклад, переглядати всю інформацію про активні областях), тобто навантаження на сервер зменшується. При використанні працюють на сервері активних зображень в каталозі сgi-bin сервера повинен бути відповідний сценарій. З міркувань безпеки багато системних адміністраторів не люблять дозволяти людям товпитися навколо сервера, записуючи сценарії в каталог сgi-bin. Якщо ви орендуєте сервер або просто використовуєте місце на чиємусь чужому сервері, вам, можливо, доведеться когось довго обходити, поки вдасться записати сценарії. Недолік активних зображень, які працюють на клієнтській машині, полягає в тому, що звертатися з ними вміють тільки браузери, які підтримують HTML 3.0. Якщо у користувача інший броузер, на вашій сторінці з'явиться звичайне графічне зображення, що не відчуває миша. Так що у вас є три можливості: зробити активне зображення на стороні клієнта, що може відвернути від вас інертних людей, що не поспішають змінювати свої браузери; помістити його на сервері, і тоді їм зможуть скористатися практично все; застосувати обидва види зображень на одній сторінці. Останній варіант, мабуть, найкращий, тому що ви попрактікуетесь в новітніх засобах НТМ
Як зробити активне зображення
Визначити карту легко. Потрібно відкрити в МарEdit файл, який містить ізо6раженіе, на якому ви хочете створити активні області, після чого клацнути і потягнути мишкою, позначивши кордон області. Програма автоматично генерує файл, що описує границі активної області. Потім цій галузі потрібно приписати URL. У будь-яких місцях зображення можна намалювати активні області у формі прямокутника, багатокутника або кола і визначити для кожної з них URL. Активні області можуть навіть перетинатися, але в цьому випадку виникають проблеми. Важливо залишати між областями небагато місця, щоб читач був впевнений, що він активує правильне посилання. Більшість браузерів при попаданні на перетин кількох активних областей вважають активної ту з них, яка першою зустрічається в карті.
Межі активних областей задаються координатами кутів прямокутника і багатокутника або центру і радіусу кола. Ці параметри записуються в карту (МАР-файл)
Після завершення створення активного зображення, ви можете зберегти отриманий файл у форматі NCSA або СЕRN, якщо воно буде працювати на сервері, або в форматі СSIМ, якщо воно функціонує на клієнтській машині. Всю іншу роботу виконує програма МарEdit. Вона створює карту на сервері або вбудовує карту на стороні клієнта в зазначений вами файл HTML. Якщо ви вирішили робити активне зображення у клієнта, Мар Edit поставляє дані тільки для тагов <МАР>. Вам доведеться самому задати таг зображення з атрибутом USЕМАР і помістити його після тега . Не забудьте перед ім'ям карти в атрибуті USЕМАР записати символ # наступним чином:
Як помістити активне зображення на НТМ-сторінку
Коли зображення стало активним і для кожної активної області визначений URL, його потрібно помістити на HTML-сторінку. Це можна зробити декількома способами, в залежності від того, яке зображення ви робите: на сервері або у клієнта.
Активні зображення на сервері
Старий випробуваний спосіб створення активних зображень (для HTML 2.0) вимагає використання атрибута ISМАР в тезі IMG. Таг IMG відноситься до зображення, і його треба помістити між початковим і кінцевим тегами посилання на файл-карту. Вам потрібно занести в HTML-файл приблизно такий рядок:
Атрибут ISМАР показує броузеру, що дане зображення є активним. Коли в будь-якої його області відбувається клацання миші, то завдяки атрибуту ISМАР сервера надсилається повідомлення, що містить координати клацання. Якщо ви коли-небудь пробували водити мишею по активному зображенню, ви могли помітити, що рядок стану в нижній частині Web- броузера показує щось на кшталт:
Числа, які стоять після знаку питання, - це координати покажчика. Ви побачите їх тільки в разі використання активних зображень на сервері. Карти зображень на стороні клієнта показують URL або посилання, асоційовану з областю карти.
Якщо ви хочете, щоб спеціальна програма на сервері обробила активне зображення, на неї треба послатися. Це означає, що URL, який показує рядок стану, може мати такий вигляд:
В даному випадку сервер для обробки активного зображення використовується програмою під назвою imagemap, що знаходиться в каталозі сgi-bin. Щоб ваші зображення заробили, вам доведеться з'ясувати у свого системного адміністратора, що в точності потрібно сервера. Залежно від програмного забезпечення сервера запис про активні зображеннях в НТМ-файлі буде виглядати або так:
Ці два приклади відповідають серверам з різним типом програмного забезпечення: в першому випадку програма обробки активних зображень не потрібно, у другому випадку - вона зобов'язана бути присутнім.
Активні зображення у клієнта
На відміну від зображень, описаних в попередньому розділі, активні зображення в клієнта працюють незалежно від програмного забезпечення сервера і не перестануть функціонувати, навіть якщо ви перенесете свої файли на інший сервер. Таким зображенням потрібні тільки дві речі: броузер, що підтримує HTML 3.0, і інформація про карту, записана в HTML-файлі. Наведемо приклад посилання в НТМ-файлі для цього виду активних зображень:
Мал. 1.10. Приклад активного зображення
Активні зображення, що працюють і на сервері, і у клієнта
Можливо, ви захочете проявити обережність і зробити зображення, що працюють і на сервері, і на клієнті.
Після того, як ви створите активні зображення на сервері і у клієнта, з'єднати їх в один HTML-файл неважко. Для цього потрібно внести в документ HTML той же запис, яку ви зробили б для активного зображення на сервері. Не забудьте тільки додати в тег IMG атрибут USЕМАР =. Атрибут USЕМАР = має більш високий пріоритет, ніж таг ISМАР, і якщо броузер підтримує активні зображення, що працюють у клієнта, він розпізнає цей атрибут. Броузер, який не знає про такі зображеннях, проігнорує атрибут USЕМАР =.