#9 Карти посилань

На цьому уроці ви дізнаєтесь як зробити посилання на окремих областях зображення. Карта посилань. - це створення інтерактивних шарів геометричної форми з відповідними посиланнями.

Отже, для створення карти посилань необхідні дві речі: Зображення, на якому передбачаються інтерактивні області і карта яка призначена для розміщення областей.

<IMG SRC="графічний файл" usemap="#ім'я карти">

usemap="#name" вказує на ім'я карти до якої буде прив'язане зображення.

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

Час розглянути, що саме знаходиться всередині контейнера MAP і як створити області посилань. На зображення можно створити області прямокутної, круглої та багатокутної форм. Описати їх можна тегом <AREA>

Прямокутна область

<area href = "адреса посилання" shape="rect" coords="x1,y1,x2,y2">

1. href="адреса посилання" посилання на сторінку яка буде завантажена після натискання на цю область.
2. shape="rect" вказує на те, що область прямокутної форми.
3. coords="x1,y1,x2,y2" вказує на координати лівого верхнього та правого нижнього кутів.

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

Виділення кола

<area href = "адреса посилання" shape="circle" coords="x,y,R">

Для круглої області необхідно вказати shape="circle", координати центра кола x,y та радіус кола R

Для визначення радіусу R в редакторі Paint необхідно навести курсор на центр кола, зафіксувати координати х1,у1. Потім підвести курсор на край кола. з однаковою координатою y. Різниця між координатами х1 центру і х2 краю і буде значення радіусу. R=x1-x2 при y1=y2.

Виділення багатокутної області

<area href = "адреса посилання" shape="poly" coords="x1,y1,x2,y2,x3,y3,x4,y4,...,x1,y1">

Для багатокутної області треба вказати shape="poly" і координати x,y початку, кінця та всіх кутів ламаної. Останньою координатою має бути перша координата x,y. Тоді лінія буде замкнута і утворить фігуру.

Розглянемо приклад

Наведіть на обличчя богатирів та клікніть на посилання.

<IMG SRC="trio.jpg" usemap="#trio">
<MAP name="trio">
<AREA href="popovich.html" shape="rect" coords="174,74,254,174" title="Альоша">
<AREA href="dobrinia.html" shape="circle" coords="390,100,60" title="Добриня">
<AREA href="muromec.html" shape="poly" coords="533,119,541,55,572,29,627,108,533,119" title="Ілля">
</MAP>

Атрибут title означає, що при наведенні курсора миші на область буде виникати відповідне повідомлення.