Графічні карти html. Малюємо карту зображення мишкою

підтримка браузерами

атрибути

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

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

Вибери постать:

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

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

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

тег

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

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

Вибери постать:

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

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

Підказка: Щоб отримати координати зображення скористайтеся редактором зображень, навіть найпростіший редактор, наприклад, Paint, Отображет координати курсору. Випишіть координати на листок або в окремий файл і внесіть значення на сторінку.

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

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

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

У клієнтському варіанті карта розташовується в тому ж 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 можна створювати приголомшливі меню і засоби навігації. Але тут теж потрібна обережність, щоб не втратити за деревами лісу.

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

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

резюме

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

»Я зробив заготовку для розміщення на певних її ділянках посилань на різні web-сторінки (« »)

Тепер якщо клікнути на фігури з написами, то відкриються відповідні їм сторінки: профіль, щоденник або всі пости з розділу «Уроки Photoshop» (увага! Після перенесення блогу на вордпресс і його переробки, посилання не працюють! Але урок залишається актуальним!)

Для того, щоб картинка заробила, я написав приблизно такий HTML-код:

Цей код можна вставити в поле повідомлення (при натиснутій кнопці «Джерело») або в епіграф ...

До речі, є й інші пости по темі: «Що таке HTML »,«HTML-код малюнків »,«Картинка-посилання »і так далі.

1. Координати

Щоб скласти вказаний код, трохи згадав геометрію :)

Система координат: вісь X - зверху вниз, вісь Y - зліва направо
Для завдання координат фігури потрібно встановити:
- квадрат (або прямокутник), сторони якого паралельні осях - координати двох протилежних кутів - X1, Y1 і X2, Y2
- багатокутник - координати ВСІХ кутів
- коло - координати центру і радіус.

У моєму випадку, виходить, потрібні координати точок A, C - для посилання «Профіль» (прямокутник), точок D, E, F, G, H - для посилання «Щоденник» (багатокутник), Q і довжина R - для посилання « уроки Photoshop »(коло). Всі ці числа в HTML-коді вгорі виділені червоним кольором. Крім того, потрібно знати розмір зображення в пікселах (зелений колір)

Необхідності в особливій точності немає, тому визначити координати можна з'ясувати за допомогою «лінійки» в Photoshop - для її виклику натискаю Ctrl + R

Мені було цікавіше, щоб хтось інший порахував координати. Для цього запускаю MS Paint (Пуск - Всі програми - Стандартні - Paint) і відкриваю в ньому малюнок. При наведенні курсора на шукані точки в нижній панелі з'являються їх координати, які старанно записую

2. HTML-код

Навігаційні карти задаються тегом

Тег map включає себе теги , Які визначають геометричні області карти-малюнка і пов'язані з ними посилання.

Розібрався я так - для створення навігаційної карти потрібні:

— теги з описом зображення

— теги карти

— теги областей

У моєму випадку, значення виявилися такими:

• width \u003d «640» height \u003d «367» - розміри зображення
• src \u003d "https: //сайт/f02c73a3cd94.jpg" - адреса зображення на сайті
• usemap \u003d "# picture " - умовне найменування зображення-карти (Може бути будь-який)
• map name \u003d «Picture» - ім'я карти (повністю відповідає зазначеному вище)

Значення для областей-посилань - href - мета посилання, shape - форма області і coords - координати - відповідають трьом областям (area) на зображенні.

Прямокутник «Профіль»

• href \u003d "https: // сайт / profile /" - адреса сторінки профілю
• shape \u003d "rect" - позначення форми «прямокутник»
• coords \u003d "235,61,472,117" - координати точок A (235,61) і С (472,117)

Багатокутник «Щоденник»

• href \u003d "https: // сайт / blog" - адреса сторінки щоденника
• shape \u003d "poly" - позначення форми «багатокутник»
• coords \u003d "235,118,362,118,474,152,457,207,229,146" - координати кутів багатокутника: точки D (235,118), E (362,118), F (474,152), G (457,207) і H (229,146)

Коло «Уроки Photoshop»

• href \u003d "https: //сайт/showjournal.php? journalid \u003d 2447247 & keywordid \u003d 929323" - адреса сторінки постів з розділу «Уроки Photoshop»
• shape \u003d "circle" - позначення форми «коло»
• coords \u003d "551,198,65" - координати кола: центр - точка Q (551,198) і радіус - R \u003d 65

3. Фініш

Підставив всі отримані значення в «систему» \u200b\u200bHTML-коду для навігаційної карти-зображення і отримав наступне:

Саме цей код при використанні «перетворюється» в картинку з областями-посиланнями.

Для тренування є «полегшений» легкий варіант створення ділянок-посилань - пост «Тренування: області-посилання на зображенні»

Якщо ви знайшли помилку, будь ласка, виділіть фрагмент тексту і натисніть Ctrl + Enter.