Навігаційні карти

Плаваючі фрейми

Тег <iframe> створює плаваючий фрейм, який знаходиться усередині звичайного документу, він дозволяє завантажувати в область заданих розмірів будь-які інші незалежні документи.

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

Синтаксис

<iframe>...</iframe>

<iframe>...</iframe>

Атрибути:

align - визначає як фрейм вирівнюватиметься по краю, а також спосіб обтікання його текстом.

allowtransparency - встановлює прозорий фон фрейма, через який видно фон сторінки.

frameborder - встановлює, відображати межу навколо фрейма або ні.

height - висота фрейма.

hspace - Горизонтальний відступ від фрейма до навколишнього контенту.

marginheight - Відступ згори і знизу від змісту до межі фрейма.

marginwidth - Відступ ліворуч і праворуч від змісту до межі фрейма.

name - Ім'я фрейма.

sandbox - Дозволяє задати ряд обмежень на контент завантажуваний у фреймі.

scrolling - Спосіб відображення смуги прокрутки у фреймі.

seamless - Визначає, що вміст фрейма повинен відображатися так, немов воно є частиною документу.

src - Шлях до файлу, вміст якого завантажуватиметься у фрейм.

srcdoc - Зберігає вміст фрейма безпосередньо в атрибуті.

vspace - Вертикальний відступ від фрейма до навколишнього контенту.

width - Ширина фрейма.

Активні зображення(image maps), або зображення, чутливі до клацань миші, дозволяють створити на вузлі графічні меню довільної форми. Активне зображення — це зображення з так званими активними областями(hot spots), які посилаються на URL інших сторінок або вузлів.

Є два методи формування активних зображень : на сервері і у клієнта. Зображення першого типу використовують сервер для того, щоб знайти той, що відповідає цій активній області URL і передати на браузер потрібну сторінку. Активні зображення, працюючі на клієнтській машині, задають інформацію про активну область на НТМL- сторінці, так що браузер сам з'ясовує, які області є активними, і просить з сервера відповідну сторінку.

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

Створення активного зображення. Процес створення активного зображення складається з двох етапів. Спочатку необхідно визначити на картинці області, які треба зробити активними, а потім співвіднести їх з посиланнями на інші URL. Активні області задаються перерахуванням їх координат(у пікселах). Усе це можна зробити вручну, визначивши координати кутів активних областей, але набагато простіше скористатися якою-небудь програмою, наприклад МарЕdit.

Визначити карту легко. Треба відкрити в МарEdit HTML- файл, що містить зображення, на якому вимагається створити активні області, після чого вибране зображення буде завантажено в робоче вікно. Потім слід вибрати тип активної області(квадрат, трикутник і круг), клацнути і потягнути мишкою, позначивши межу області. Програма автоматично робить запис в HTML- файл, що описує межі активної області. Потім цій області треба приписати URL. У будь-яких місцях зображення можна намалювати активні області і визначити для кожної з них URL. Важливо залишати між областями трохи місця, щоб при читанні бути упевненим, що активізується правильне посилання. Межі активних областей задаються координатами кутів прямокутника і багатокутника або центру і радіусу круга. Якщо ви вирішили робити активне зображення у клієнта, Map Edit поставляє дані тільки для тегів <MAP>. Вам доведеться самим задати тег зображення з атрибутом USEMAP і помістити його після тега

</MAP>. Не забудьте перед ім'ям карти в

атрибуті USEMAP записати символ «#» таким чином:

<IMG SRC="mymap.gif" USEMAP="#sitemap">

Активні зображення у клієнта працюють незалежно від програмного забезпечення сервера і не перестануть функціонувати, навіть якщо файли будуть перенесені на інший сервер. Таким зображенням потрібно тільки дві речі: браузер, підтримувальний HTML 3.0, і інформація про карту, записана в HTML- файлі. Наведемо приклад активних зображень.

<IMG SRC="ball.gif" ALT="Навігаційна карта" WIDTH="200" HEIGHT="200" USEMAP="#imap">

<MAP NAME="imap">

<AREA SHAPE="rect" COORDS="0,0,100,200" HREF="frame.html">

<AREA SHAPE="rect" COORDS="150,0,200,200" HREF="Untitled1.html">

<AREA SHAPE="default" nohref>

</MAP>