Основні теоретичні відомості

Основні поняття

Web-сторінки для організації посилань використовують візуалізований вид організації посилань: карти зображень. HTML дозволяє прив'язувати посилання до різних областей зображення. Карта посилань являє собою зображення, розбите на фрагменти, причому кожний фрагмент є одночасно гіперпосиланням.

 

Основи використання карт зображень

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

Графічне подання зображення

Карта зображень - це звичайне графічне зображення формату GIF, JPG або інше. При цьому у форматі GIF може використовуватися прозорий колір, а також режим чергування рядків. У тегу <IMG> є атрибут usemap, що визначає дане зображення яккарту посилань. Як значення цього атрибута використовується ім'я елементу MAP, що містить опис карти. Наприклад, тег

<IMG s гс=" mapl. gif " usemap="#navigation">

Опис структури карти міститься в елементі з ім'ям navig. Символ # у значенні атрибута usemap показує, що за цим символом слідує ім'я закладки, розміщеної в поточному HTML-документі.

Значення атрибута name тегу < map > з точністю повинне збігатися зі значенням атрибута usemap тегу <IMG>. Символ # - вказує, що після нього йде ім'я закладки

Активні області можуть мати форму прямокутників, кіл і багатокутників. Допускається будь-яка комбінація цих фігур.

 

Переваги й недоліки карт зображень

У використанні карт зображень є як позитивні, так і негативні моменти. Більшість із них носить естетичний характер.

Переваги.

Карти зображень найбільше зручно використовувати в наступних ситуаціях:

· для подання просторових зв'язків, наприклад географії координат, які було б важко задати окремими кнопками;

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

 

Недоліки:

· якщо не передбачене альтернативне текстове меню, то не залишається засобів навігації для користувачів, які не включають графіку;

· збільшується час завантаження Web-сторінки;

· не відзначає іншим кольором пройдені посилання.

С творення карти посилань в HTML

Процедура завдання карт посилань

Процедура завдання карт посилань розбивається на декілька етапів:

· завдання всього зображення карти зі спеціальною вказівкою, що це зображення являє собою карту, а не простий малюнок;

· розбивка зображення на окремі фрагменти й складання їхнього опису;

· опис кожного фрагмента.

 

Варіанти карт зображень

· Серверний ( розглядатися не буде )- браузер надсилає запит на сервер для одержання адреси обраного посилання. Це може зажадати додаткового часу на очікування.

· Клієнтський - дозволяє розмістити всю інформацію про конфігурацію карти в HTML-файлі, у який вбудоване зображення. При клієнтському варіанті число звертань до сервера зменшується, і збільшується швидкість доступу до інформації. Для вказівки того, що убудоване зображення є опорним для карти, використовується параметр usemap тегу <img>.

Тег <MAP>

Тег <MAP> призначений для опису конфігурації областей карти зображення. Єдиний параметр тегу <MAP> – name. Значення атрибуту name визначає ім'я, що повинне відповідати імені в usemap. Тег <MAP> вимагає закриваючий тег. Усередині цієї пари тегів повинні розташовуватися описи активних областей карти, для цього використовується тег <AREA>.

Тег <AREA>

Тег <AREA> задає одну активну область. Активні області можуть перекриватися, при цьому, виконуватися буде те посилання, опис якого розташовується першим в списку областей. В таблиці 4 розглянуті основні атрибути тегу <AREA>

 

Таблиця 4. Атрибути тегу <AREA>

Параметр	Опис
shape	Визначає форму активної області: · rect - прямокутник (за замовчуванням); · circle – коло; · poly – багатокутник; · default - всі крапки області.
coords	Задає координати окремої активної області. Значенням параметра є список координат точок, що визначають область, розділених комами. Координати записуються у вигляді цілих невід’ємних чисел. Початок координат розташовується у верхньому лівому куті зображення, якому відповідає значення 0,0. Перше число визначає координату по горизонталі, друге - по вертикалі. Список координат залежить від типу області. · rect - задаються координати верхнього лівого і нижнього правого кутів прямокутника. · circle - задаються три числа - координати центра й радіус. · poly - задаються координати вершин багатокутника в потрібному порядку (остання точка в списку координат повинна збігатися з першою). · default - не вимагає завдання координат.
href, nohref	Параметри href і nohref є взаємовиключними. Якщо не заданий жоден із цих параметрів, то вважається, що для даної області нема посилання. · href - визначає адреса посилання, що записується в абсолютній або відносній формі. Правила запису повністю збігаються із записами посилань у тезі <а>. · nohref - використовується для виключення частини активної області (область у вигляді кільця - 2 кругові)
target	Вживається при роботі з фреймами. Він вказує ім'я фрейму, у який буде розміщено документ, що завантажується по посиланню.
alt	Дозволяє записати альтернативний текст для кожної з активних областей зображення. Цей текст буде відігравати роль лише для творця документа, тому що ніколи на екрані не з'явиться.

Приклад

Два прямокутних посилання

<html>

<body>

<h2>Приклад карти посилань</h2>

<hr><br>

<img src="NOTEPAD.GIF" height="100" border="0" usemap="#f" hspace="250">

<map name="f">

     <area shape="rect" coords="0,0,99,50" href="s.htm" alt="верхня ">

<area shape="rect" coords="0,50,99,99" href="privet.htm" alt="нижня">

</map>

</body>

</html>