| Зображення-карти. |
Карти - це спосіб зробити різні частини одного графічного зображення гіперпосиланнями. Вони дозволяють виділити окремі області зображень і визначити для кожної з них свою дію.
Приклад:<MAP NAME="ImageMap"> <AREA HREF="something.html" SHAPE="rect" COORDS="0,0,70,140" ALT="Ліва половина"> <AREA HREF="anything.html" SHAPE="rect" COORDS="71,0,140,140" ALT="Права половина"> </MAP> <!-- Прикріплюємо до зображення--> <IMG src="img/block.gif" USEMAP="#ImageMap" HEIGHT="140" WIDTH="140" BORDER="0">
У цьому прикладі ми створили квадратне зображення block.gif розміром 140x140 пікселів, ліва частина якого є посиланням на файл something.html, а права - на файл anything.html.
Як видно, для створення карти нобхідно вставити в тег <IMG SRC=""> атрибут USEMAP="#name", де name - ім'я карти (значок # обов'язковий). У прикладі використовувалася назва ImageMap. Решта атрибутів у цій тезі є стандартною.
Описуємо активні області карти. Вони відкривається тегом <MAP NAME="name"> (тут повторюється ім'я, але вже без значка #), а закінчуємо таким, що закривається тегом </MAP>.
Між цими тегами подаємо опис кожної активної області зображення:<AREA SHAPE="форма" COORDS="координати" HREF="адреса" TITLE="аль-тернативний текст">. Елемент <AREA> має наступні атрибути та їх значення:
| Параметр | Характеристика |
|---|---|
| SHAPE | Описує форму області, що виділяється, можливі значення: RECT – прямокутник; CIRCLE – круг; POLY – багатокутник; DEFAULT - визначає всю область, тобто весь малюнок може стати посиланням. |
| COORDS | Координати, що визначають розміри і положення області на зображенні. Всі координати відлічуються в пікселях від лівого верхнього кута зображення. Кількість і порядок значень залежить від значення аттрибута SHAPE: RECT: - лівий-X, верхній-Y, правий-X, нижній-Y (тобто спочатку координати лівого верхнього кута, потім правого нижнього); CIRCLE: - центр-X, центр-Y, радіус (тобто горизонтальна і вертикальна координати центру круга і радіус); POLY: - X1, Y1, X2, Y2, ..., Xn, Yn (просто перераховуються координати всіх вершин багатокутника). |
| NOHREF | Визначає, що цій області не відповідає жодне посилання. Де це може стати в нагоді? Ну, наприклад, якщо ви хочете зробити посилання не у вигляді круга, а у вигляді кільця. |
| ALT | Альтернативний текст для виділеної області, використовується невізуальними браузерами. |
| TITLE | Назва виділеної області, виводиться у вигляді підказки, спливаючої при наведенні курсора на область малюнка. |
| TARGET | Значення цього аттрибута ("_top", "_blank", "_self" або "_parent") визначає, в якому вікні буде відкритий документ (див.наступний пункт). |
Для того, щоб розрахувати точно координати потрібної частини зображення існують спеціальні програми. Одна з них називається MapEdit.