Навігаційні картки. Створення посилань на ділянках зображення: мапа посилань Графічні карти html

Тег

Усередині контейнера

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

Якщо тег

Якщо регіони перекриваються, елемент, який визначає регіон, який з'явився раніше у документі, має пріоритет.

HTML: 3.2 | 4 / XHTML: 1.0 | 1.1

Синтаксис

Атрибути

class	визначає ім'я класу, що використовується
dir	визначає напрямок символів: ltr - зліва направо rtl - справа наліво
id	унікальний ідентифікатор
lang	визначає мову документа, що відображається
name	ім'я картки зображення. Використовується як значення параметра usemap тега
onblur	втрата фокусу елементом
onclick	клацання на елементі
ondblclick	подвійне клацання на елементі
onfocus	отримання фокусу елементом
onkeydown	натискання клавіші, коли елемент має фокус
onkeypress	натискання та звільнення клавіші, коли елемент має фокус
onkeyup	звільнення раніше натиснутої клавіші, коли елемент має фокус
onmousedown	натискання кнопки миші, коли елемент має фокус
onmousemove	рух вказівника миші, коли елемент має фокус
onmouseout	зміщення вказівника миші з елементом
onmouseover	розміщення вказівника миші на елемент
onmouseup	звільнення раніше натиснутої кнопки миші, коли елемент має фокус
style	задає вбудовану таблицю стилів
title	спливаюча підказка

приклад

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

Тег - Елемент рівня блоку, тобто. вміст тега завжди починається з нового рядка. Після тега також додається перенесення рядка.

Влад Мержевич

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

У клієнтському варіанті карта знаходиться в тому ж HTML-документі, що і посилання на зображення.

Клієнтський варіант картки-зображення

Для вказівки того, що зображення є картою, використовується атрибут usemap тега . Як значення вказується посилання опис конфігурації карти.

Приклад 1. Використання картки-зображення

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

Атрибути тега AREA

shape

Визначає форму активної галузі. Форма може бути у вигляді кола (circle), прямокутника (rect), полігону (poly).

alt

Додає альтернативний текст для кожної області. Служить лише коментарем для заслання, оскільки на екран не виводиться.

coords

Вказує координати активної області. Координати відраховуються у пікселах від лівого верхнього кута зображення, якому відповідає значення 0,0. Перше число є координатою по горизонталі, друге по вертикалі. Список координат залежить від форми області.

Для кола задаються три числа - координати центру кола та радіус.

Для прямокутника – координати лівого верхнього та правого нижнього кута.

Для полігону задаються координати його вершин (рис. 2).

Мал. 2. Координатні точки для полігону

href

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

Переваги карт-зображень

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

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

Недоліки

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

2. За складної форми області посилання збільшується обсяг коду HTML. Контур апроксимується набором прямих відрізків, для кожної точки такого відрізка слід задати дві координати, а загальна кількість таких точок може бути досить великою. Заради справедливості, слід зазначити, що складні форми є окремим випадком і застосовуються досить рідко.

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

Юзабіліті

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

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

Альтернативні варіанти

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

Використання FLash

У flash-роликах можна створювати різні області посилань, використовуючи можливості векторної графіки. Завдяки широким можливостям, на Flash можна створювати чудові меню та засоби навігації. Але тут теж потрібна обережність, щоб не загубити дерева лісу.

Розрізання зображень

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

Резюме

Як з'ясувалося, причина використовувати карти-зображення лише одна – складна форма посилань, продиктована завданнями дизайну. Типове застосування - регіони географічної карти, які є посиланнями. В інших випадках можна обійтися і текстовими посиланнями, а при необхідності створення графічної навігації, одне зображення для зручності можна розрізати на фрагменти. Такий підхід створить більше зручності користувачам, особливо тим, які через різні причини відключають показ зображень у браузері. Про них також треба пам'ятати.

Мапа зображень (Image Map)дозволяє прив'язувати посилання фрагментів зображення. Клацаючи мишею на окремих частинах зображення, користувач може переходити за тим чи іншим посиланням різні Web-сторінки.

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

Карта зображення складається з ділянок зображення та відповідних посилань. Описує ділянку зображення і ставить йому у відповідність посилання одиночний тег .

Атрибути тега

Координати за замовчуванням вимірюються у пікселях.

Початок відліку координат – верхній лівий кут екрана, тобто.

Приклади різних форм областей карти зображень

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

Щоб використовувати зображення як карту, в тег необхідно ввести додатковий атрибут usemap, що визначає ім'я картки зображення. Перед цим ім'ям ставиться знак "#".

Приклад використання Image Map

Під час натискання на різні області зображення змінюється колір відповідного тексту.

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

Для цього нам не обійтися без так званих навігаційних карт.

Припустимо, у нас є такий малюнок:

І нам необхідно зробити, так що б користувач, натиснувши на одну з цих "кнопок" переходив за посиланням у той чи інший документ. Що нам для цього потрібно?

Насамперед позначимо наш малюнок не як звичайне графічне зображення, бо як навігаційну карту надавши цьому малюнку своє індивідуальне ім'я. Робиться це за допомогою атрибуту usemapтега (я думаю Вам не варто нагадувати про те, що тег має обов'язковий атрибут srcякий вказує шлях до тієї чи іншої картинки )

Назвемо наш малюнок/карту ім'ям panel. Це буде виглядати так:

usemap="#panel">

Не забуваймо за правилами синтаксису поставити знак # грати перед ім'ям.

А тепер, власне, складемо навігаційну карту. Вона задається тегом у якого є атрибут name- ім'я.. уловлюєте до чого я веду? Ну як Ви напевно вже здогадалися, вкажемо на базі якого малюнка ми будуватимемо нашу навігаційну карту вказавши його ім'я.

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

)
shape- форма області малюнка, яка буде служити посиланням. Може мати одне з трьох значень:

• rect- прямокутна область
• poly- область являє собою якийсь багатокутник
• circle- область задана коло

coords- координати форми

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

Тепер наша карта набуває такого вигляду:

По суті, тепер "зелена" квадратна кнопка стала робочою.

У чому Ви можете переконатися, натиснувши на неї в цьому прикладі:

usemap="#panel">

Трохи поспішив з прикладом до ладу не пояснивши суть написаного. Загостримо увагу на атрибутах тега .

href="primer1.html"- тут думаю зрозуміло, це шлях до документа, який має відкритися, натиснувши на "зелену кнопку".

Так як кнопка у нас квадратна, а квадрат як відомо це "правильний" прямокутник, форму області малюнка призначаємо прямокутною shape="rect" .

А тепер найцікавіше coords="15,15,82,82"- координати. Для прямокутника вони задаються двома точками за принципом "Х1, У1, Х2, У2" Де Х1, У1 - перша точка і відповідно Х2, У2 - друга. Координати вказуються в пікселях. Наш малюнок/карта має розміри 300 на 100 пікселів, її верхній лівий піксель має координати Х=0,У=0, а найнижчий правий Х=300,У=100. Якщо не зрозуміло, поринемо в геометрію за п'ятий клас.

Погляньте на малюнок:

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

Полігон (багатокутник).

Займемося жовтою кнопкою, вона у нас представлена ​​у вигляді трикутника. Для того щоб виділити її "робочу" область з нашого малюнка, надамо атрибуту shapeзначення poly- полігон, яке визначить цю область як якийсь багатокутник, де координати через кому будуть його вершинами, їх може бути скільки завгодно багато "Х1, У1, Х2, У2, Х3, У3, Х4, У4 ... Х124, У124" фігура утворена цими точками вершинами кутів може мати вигляд будь-якого багатокутника як правильного, і неправильного. У нашому випадку кута всього три, на те він і трикутник, отже його координати будуть задані трьома парами значень "Х1, У1, Х2, У2, Х3, У3"

Значить, все разом пишемо так:

shape="poly" coords="148,15,185,82,110,82">

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

Окружність

Ну і остання "червона кнопка" вона у нас кругла.. значить форма області буде круглою shape=" circle ". Цього разу з координатами справа трохи інакша. Нам знадобиться три значення Х, У, R. Х і У це координати центру нашого кола, а R - це довжина радіусу в пікселях.

Ось малюнок:

А ось приклад:

Доводимо до розуму.

Тепер трохи про те, що ще бажано було б зробити з нашою картою, перш ніж "монтувати" її в якусь сторінку.

Визначимо фіксовані розміри малюнка-картки атрибутами widthі height

Напишемо альтернативний текст, як всього малюнка карти, так її окремих областей використовуючи атрибут alt, а також опис елементів атрибутом title .

Позбавимося рамки бордюру.. зробимо border="0"..(ну якщо Вам з бордюром більше подобається, можете цього не робити.. я не наполягаю..)

Наприкінці має виглядати приблизно так:

width="300" height="100" border="0" alt="Панель управління" title="Панель управління"> !}

Перетин областей

Іноді зручно формувати "робочу" область зображення "змішуючи" різні форми.

Припустимо, наша чергова кнопка має такий вигляд:

Звичайно, можна визначити форму як багатокутник, але доведеться задати безліч координат для округлої частини такої кнопки (ну це якщо потрібна особлива точність у навігаційній карті).

А можна визначити у цьому прикладі дві форми прямокутник rectі коло circleяк показано на малюнку:

А в коді вказати шлях до одного й того самого документа:

"Не область"

Розглянемо на прикладі.. припустимо необхідно виготовити ось таку кнопку:

Як бути з отвором у ній?

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

Карта буде задана двома областями, неактивним колом circleта активною прямокутною областю rectі як показано на малюнку кресленні мати такі координати:

Як уже говорилося раніше, при перетині областей найбільшим пріоритетом користуватиметься та область, яка в коді всередині тега вказано першою

Отже, приклад матиме такий вигляд:

Карта на сервері.

Уривок з довідника (атрибути тега ):

usemap- Зображення є навігаційною картою на стороні клієнта.
ismap- Зображення є навігаційною картою на сервері.

Не зрозуміло? Тоді читаємо.

З атрибутом usemapми нібито розібралися.. Дивіться, користувач (клієнт) відкривши Вашу сторінку, одночасно з усім іншим змістом, завантажує "на свій бік" як сам малюнок, так і навігаційну карту до нього і вся ця справа обробляється його браузером.

А ось атрибут ismapтега говорить браузеру про те, що до цього зображення на сервері, ну там, де Ви виклали або збираєтеся викласти свій сайт (читаємо статтю: ), є навігаційна карта. І тепер, коли відвідувач (клієнт) клікне по якійсь області малюнка з таким атрибутом, браузер запам'ятає координати цього кліку і відправить їх на сервер, де спеціальна програма обробить ці дані і перенаправить користувача на ту адресу, яка вказана в карті на сервері, відповідно із отриманими від браузера клієнта координатами точки.

Пишеться так:

Де адресу навігаційної карти на якомусь сайті.. розміщеному на тому чи іншому сервері.

Атрибут name елемента

Атрибутами тега ми вказуємо як координати області (атрибут coords), так і тип необхідної нам фігури (атрибут shape):

Приклад використання

Давайте розглянемо приклад у якому при натисканні на певну фігуру на одному малюнку відбувається перехід на різні веб-сторінки, які описують ці фігури (посилання на Вікіпедію):

Вибери фігуру:

"Доступні 4 фігури для вибору" >

І так по порядку, що ми зробили в цьому прикладі:

• Розмістили зображення (тег ), яке ми будемо використовувати при складанні зображенні-карти. В атрибуті usemap необхідно обов'язково вказати ім'я зображення-картки, яке ми будемо використовувати в елементі
• Розміщуємо зображення-картку (тег
• Розміщуємо чотири теги , які визначають інтерактивні області у зображенні-картці:
  • Першоюми задаємо прямокутну область(атрибут shape зі значенням "rect"), вона відповідає нашому першомузображенню ( перші двазначення відповідають верхньому лівому куту, наступні двазначення визначають правий верхній та нижній кут).
  • Другийвказуємо круглу область(атрибут shape зі значенням "circle"), вона відповідає нашому другомузображенню ( першезначення відповідає координатам по осі x, а друге по осі y, третє визначає радіус).
  • Що стосується третійі четвертої фігури, то вони складені за принципом багатокутної області(Атрибут shape зі значенням "poly"). Ви визначаєте необхідну кількість точок на зображенні, обчислюєте координати цих точок (графічний редактор) і вказуєте в такому порядку, щоб їх браузер міг з'єднати однією лінією. На прикладі трикутника (третій малюнок): першаточка (координати xі yвершини), другаточка (координати xі yлівого нижнього кута) та третяточка (координати xі yправого нижнього кута).

Звертаю Вашу увагу на те, що якщо тег має Практичне завдання № 26.

Нюанс: для чистоти практичного завдання пропоную як першу точку використовувати вершину зірки і рухатися за годинниковою стрілкою. Як значення атрибуту href я вказав # у цьому випадку вона виступає як заглушка (ви залишаєтеся на тій самій сторінці), ви можете зробити перехід на будь-яку сторінку.