Навігаційні карти. Створення карти зображень в HTML Який тег описує клієнтські карти зображень

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

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

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

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

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

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 = "(! LANG: Панель управління" title="Панель управління"> !}

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

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

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

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

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

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

"Чи не область"

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

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

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

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

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

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

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

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

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

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

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

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

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

При створенні сторінки з навігаційною картою тег завжди повинен бути вище самої карти Тобто писати ось так:



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

І ще що стосується завантаження ..



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

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

»Я зробив заготовку для розміщення на певних її ділянках посилань на різні 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 = «640» height = «367»- розміри зображення
• src = "https: //сайт/f02c73a3cd94.jpg" - адреса зображення на сайті
• usemap = "# picture "- умовне найменування зображення-карти (Може бути будь-який)
• map name = «Picture»- ім'я карти (повністю відповідає зазначеному вище)

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

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

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

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

• href = "https: // сайт / blog" - адреса сторінки щоденника
• shape = "poly" - позначення форми «багатокутник»
• coords = "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 = "https: //сайт/showjournal.php? journalid = 2447247 & keywordid = 929323" - адреса сторінки постів з розділу «Уроки Photoshop»
• shape = "circle" - позначення форми «коло»
• coords = "551,198,65" - координати кола: центр - точка Q (551,198) і радіус - R = 65

3. Фініш

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

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

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

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

Розглянемо приклад як виглядає карта зображень в html:

При наведенні курсора мишкою на області зеленого прямокутника видно, що вона є посиланням на "#green_link" (мітка обрана для прикладу, можна зробити посилання на будь-яку сторінку в інтернеті). У червоного квадрата на "#red_link", а у синього кола відповідно на "#blue_link".

Код цього прикладу:

img / primer-kartu-izobrazheniy-1.jpg">

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

1. Необхідно створити зв'язку зображення і карти

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

2. Опис карти

3. Кожен елемент карти описується за допомогою тега , В якому вказується тип об'єкту за допомогою атрибута shape (прямокутник, коло або багатокутник) і його координати.

Області можуть перекривати один одного. У цьому випадку посилання буде вести на той об'єкт, що описаний останнім.

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

1. Атрибут shape = "тіп_об'екта" - задає тип об'єкта. Може приймати наступні значення:

• circle - коло;
• rect - прямокутник;
• poly - багатокутник;

2. Атрибут coords = "значенія_коордінат"- визначає геометричне розташування об'єкта та його розміри.

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

Залежно від типу об'єкта потрібно задавати значення координат в різних форматах. Всі значення вказується в пікселях (позначку px писати не потрібно).

• Для типу circle: coords = (x, y, r), де x, y координати центру кола, а r - радіус кола;
• Для типу rect: coords = (x1, y1, x2, y2), де x1, y1 координати лівої верхньої точки прямокутника, x2, y2 - координати нижній правій точки прямокутника;
• Для типу poly: coords = (x1, y1, x2, y2, ..., xn, yn), Послідовно вказуються координати x, y кожної точки багатокутника;

3. Атрибут href = "адрес_перехода"- задає посилання для переходу (аналогічно). Крім адреси переходу можна використовувати функції JavaScript для виконання якоїсь дії.

• _blank - відкриває сторінку в новому вікні
• _self - завантажує сторінку в поточне вікно
• _parent - завантажує сторінку у фрейм-батько
• _top - скасовує всі фрейми і завантажує сторінку в повному вікні браузера

5. Атрибут title = "(! LANG: підказка" - выводит всплывающую подсказку. можно также сделать более красивую всплывающую подсказку: как сделать красивую всплывающую подсказку для ссылки »!}

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

Обов'язково область nohref повинна йти першою.

Приклад коду:

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

Всім привіт. З Вами Бернацький Андрій.

У цьому уроці я розповім про те, як створювати карти-зображень в HTML.

Карта-зображення- це будь-яка картинка, може бути фотографія, яка має кілька активних зон.

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

Спочатку пропоную Вам відео версію даного уроку:

Робиться це все досить просто. Беремо будь-яку фотографію з друзями. Краще вставити її в свій окремий блок

.

XHTML

Я взяв для прикладу свою фотографію.

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

Головний параметр у тега imgв даному випадку - це usemap = "# img-nav". Він вказує на карту з яким ім'ям ми будемо посилатися.

XHTML

Йдемо по порядку.

- значення параметра name має збігатися зі значенням параметра usemap тега img, тільки у тега map воно записується без символу #.

параметр shapeтега - показує, якого типу буде наша область. На те, яка буде наша область, показує значення параметра shape:

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

poly - довільний багатокутник.

circle - область буде у вигляді кола.

параметр coordsмістить координати нашої області.

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

якщо shape = "poly", То вказуються координати кожної вершини багатокутника. shape = "poly" coords = "80,100,150,100,210,40,300,40,300,110"в даному випадку координати першої вершини будуть 80,100, другий 150,100, третій - 210,40, четвертої - 300,40, п'ятої - 300,110.

якщо shape = "circle", То вказуємо координати центру і радіус. shape = "circle" coords = "300,300,100" тут координати центру 300,300 і радіус 100.

title = "(! LANG: Andrey" alt="Andrey" !}вже знайомі параметри. Зупинятися на них не буду.

Повний код представлений нижче:

XHTML