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

Створення карти зображення є однієї із найпривабливыших можливостей HTML, що дозволяє користувачеві прив'язувати посилання на інші документи до окремих частин зображень. Клацаючи мишею на окремих частинах зображення, користувач може виконувати ті або інші дії, переходити по тому або іншому посиланню на інші документи й т.п.

Увага! Якщо ви хочете використати технологію картування зображень, то вам необхідно використати броузер, що підтримує дану технологію!

Щоб включити підтримку карти для зображення, необхідно ввести додатковий параметр у тег IMG:

Параметр USEMAP указує, у якому місці перебуває карта описуваного зображення. Карта зображення визначає, якому ділянці зображення який URL відповідає. Карта зображення може перебувати в тім же документі, що й зображення, або в іншому документі. Приміщення карти в інший документ дозволяє зібрати всі карти зображень в одному документі (якщо у вас їх трохи в різних документах), але додає ще одну ітерацію в мережі, коли за першу ітерацію з'ясовується місцезнаходження карти, а за другу - виконання дії, запропонованого URL для даної ділянки зображення. Параметр map_name указує ім'я карти для зображення, а попередній йому URL визначає місцезнаходження карти. Якщо даний URL відсутній, то карта із зазначеним ім'ям шукається в поточному документі.

Розглянемо синтаксис визначення карти зображення:

Параметри:

<MAP NAME="map_name">

Даний тег визначає початок опису карти з ім'ям map_name.

<AREA...>

Описує ділянка зображення й ставить йому у відповідність URL. Параметри:

SHAPE

Необов'язковий параметр, що вказує на форму обумовленої області зображення. Може приймати значення:

default - за замовчуванням (звичайно прямокутник)
rect - прямокутник
circle - коло
poly - багатокутник довільної форми

COORDS

Координати в пікселів описуваної області. Для прямокутника це чотири координати лівих верхніх і правого нижнього кутів, для кола - три координати (два - центри кола, третя - радіус). Для багатокутника цей опис кожного кута у двох координатах - відповідно число координат дорівнює подвоєній кількості кутів.

Координати зважають на нуля, тому для опису області 100 на 100 використається опис:

<AREA COORDS="0,0,99,99"...>

HREF="url"

Опис посилання, дії по який будуть виконуватися при щиглику миші в заданій області.

NOHREF

Параметр, що вказує, що посилання відсутня для даної ділянки. За замовчуванням, якщо не зазначений параметр HREF, те вважається що діє параметр NOHREF. Також, для всіх неописаних ділянок зображення вважається, що використається параметр NOHREF.

Якщо дві описаних області накладаються один на одного, то використається посилання, що належить першої з описаних областей.

</MAP>

Даний тег завершує опис карти зображення.

Застосування:

Технологія Image Map застосовується у всіляких областях. Однак найбільше часто її застосування можна побачити при створенні графічних меню, коли створюється одне велике зображення з елементами меню, і кожній ділянці зображення пропонується яке або дія.

Так само застосовувати дану технологію можна при створенні простих ГИС-подібних систем з картографічними можливостями.

ЗАВДАННЯ

Додати до сайту сторінки резюме та портфоліо. Організувати навігацію по цих сторінках за допомогою посилань.
Додати маркери та організувати посилання вгору та вниз сторінки.
Додати гіперпосилання на маркер іншої сторінки
Додати посилання на електронну пошту
Додати посилання на файл документу (.doc)
Додати посилання на web-ресурс (http://www.google.com.ua)
Створити карту України з посиланнями на карти областей використовуючи карти зображень.

КОНТРОЛЬНІ ПИТАННЯ

1. Вкажіть, що означає URL-адреса:

· https://www.google.com

· ftp://193.138.147.148/

· http://www.biofon.ru

2. Яка структура посилань у документі?

3. Який тег створює посилання всередині HTML-документа?

4. Коли використовують тег < map name="хххххх">?

5. Вкажіть основні параметри тегу <area...> та поясніть їх дію.