У цій статті ми з Вами розглянемо як скласти клієнтську картку, при натисканні на певну область якої ми зможемо перейти за певним посиланням. Складання зображень-карт можна рідко зустріти на сайтах, оскільки цей процес досить трудомісткий, але якщо ви хочете здивувати ваших відвідувачів незвичайною формоюдля посилань і у вас є вільний час для самоосвіти, то ця стаття для вас.
Тег
Атрибутами тега ми вказуємо як координати області (атрибут coords), так і тип необхідної нам фігури (атрибут shape):
Приклад використання
Давайте розглянемо приклад у якому при натисканні на певну фігуру на одному малюнку відбувається перехід на різні веб-сторінки, які описують ці фігури (посилання на Вікіпедію):
Вибери фігуру:
І так по порядку, що ми зробили в цьому прикладі:
- Розмістили зображення (тег
), яке ми будемо використовувати при складанні зображенні-карти. В атрибуті usemap необхідно обов'язково вказати ім'я зображення-картки, яке ми будемо використовувати в елементі
- Розміщуємо зображення-картку (тег
- Розміщуємо чотири теги , які визначають інтерактивні області у зображенні-картці:
- Першоюми задаємо прямокутну область(атрибут shape зі значенням "rect"), вона відповідає нашому першомузображенню ( перші двазначення відповідають верхньому лівому куту, наступні двазначення визначають правий верхній та нижній кут).
- Другийвказуємо круглу область(атрибут shape зі значенням "circle"), вона відповідає нашому другомузображенню ( першезначення відповідає координатам по осі x, а друге по осі y, третє визначає радіус).
- Що стосується третійі четвертої фігури, то вони складені за принципом багатокутної області(Атрибут shape зі значенням "poly"). Ви визначаєте необхідну кількість точок на зображенні, обчислюєте координати цих точок ( графічний редактор) і вказуєте у такому порядку, щоб браузер їх міг з'єднати однією лінією. На прикладі трикутника (третій малюнок): першаточка (координати xі yвершини), другаточка (координати xі yлівого нижнього кута) та третяточка (координати xі yправого нижнього кута).
Звертаю Вашу увагу на те, що якщо тег має Практичне завдання № 26.
Нюанс: для чистоти практичного завдання пропоную як першу точку використовувати вершину зірки і рухатися за годинниковою стрілкою. Як значення атрибуту href я вказав # у цьому випадку вона виступає як заглушка (ви залишаєтеся на тій самій сторінці), ви можете зробити перехід на будь-яку сторінку.
Підказка: Щоб отримати координати зображення, скористайтеся редактором зображень, навіть найпростішим редактором, наприклад, Paint, відображає координати курсору. Випишіть координати на аркуш або окремий файл і внесіть значення на сторінку.
Якщо у Вас виникнуть труднощі з виконанням завдання, проінспектуйте код сторінки, відкривши приклад в окремому вікні та уважно його вивчіть.
Тег
Усередині контейнера
- один або більше елементів< >. Ці елементи не мають вмісту, але визначають геометричні регіони карти зображень та гіперпосилання, асоційовані з кожним регіоном
- вміст рівня блоку. Цей вміст має включати< >, які специфікують геометричні регіони карти та посилання, асоційовані з кожним регіоном
Якщо тег
Якщо регіони перекриваються, елемент, який визначає регіон, який з'явився раніше у документі, має пріоритет.
HTML: 3.2 | 4 / XHTML: 1.0 | 1.1
Синтаксис
Атрибути
| class | визначає ім'я класу, що використовується |
|---|---|
| dir | визначає напрямок символів:
|
| id | унікальний ідентифікатор |
| lang | визначає мову документа, що відображається |
| name | ім'я картки зображення. Використовується як значення параметра usemap тега |
| onblur | втрата фокусу елементом |
| onclick | клацання на елементі |
| ondblclick | подвійне клацання на елементі |
| onfocus | отримання фокусу елементом |
| onkeydown | натискання клавіші, коли елемент має фокус |
| onkeypress | натискання та звільнення клавіші, коли елемент має фокус |
| onkeyup | звільнення раніше натиснутої клавіші, коли елемент має фокус |
| onmousedown | натискання кнопки миші, коли елемент має фокус |
| onmousemove | рух вказівника миші, коли елемент має фокус |
| onmouseout | зміщення вказівника миші з елементом |
| onmouseover | розміщення вказівника миші на елемент |
| onmouseup | звільнення раніше натиснутої кнопки миші, коли елемент має фокус |
| style | задає вбудовану таблицю стилів |
| title | спливаюча підказка |
приклад
- закриваючий тег обов'язковий ()
- атрибут id є обов'язковим
- рекомендується надавати текстову альтернативу графічній карті для тих випадків, коли графіка недоступна або користувач не може її отримати
- не рекомендується використовувати карту-зображень як основну навігацію, через слабку підтримку старими та голосовими браузерами
Тег - Елемент рівня блоку, тобто. вміст тега завжди починається з нового рядка. Після тега також додається перенесення рядка.
HTML-зображеннядодаються на веб-сторінки за допомогою тега . Використання графіки робить веб-сторінки візуально привабливішим. Зображення допомагають краще передати суть та зміст веб-документа.
За допомогою HTML-тегів
Вставка зображень у HTML-документ
1. Тег ![]()
Елемент представляє зображення та його резервний контент, який додається за допомогою атрибуту alt . Оскільки елемент
є малим, то рекомендується розташовувати його всередині блокового елемента, наприклад,
Або
Тег має обов'язковий атрибут src значенням якого є абсолютний або відносний шлях до зображення:
Для тега доступні такі атрибути:
| Атрибут | Опис, прийняте значення |
|---|---|
| alt | Атрибут alt додає альтернативний текстзображення. Виводиться на місці появи зображення до його завантаження або при відключеній графіку, а також виводиться підказкою при наведенні курсору миші на зображення. Синтаксис: alt="опис зображення" . !} |
| crossorigin | Атрибут crossorigin дозволяє завантажувати зображення з ресурсів іншого домену за допомогою CORS-запитів. Зображення, завантажені в полотно за допомогою CORS-запитів, можна використовувати повторно. Допустимі значення: anonymous — Cross-origin запит виконується за допомогою заголовка HTTP, при цьому облікові дані не передаються. Якщо сервер не дає облікові дані серверу, з якого запитується контент, зображення буде зіпсовано і його використання буде обмежено. use-credentials — Cross-origin запит виконується з передачею облікових даних. Синтаксис: crossorigin="anonymous" . |
| height | Атрибут height задає висоту зображення px . Синтаксис: height = "300". |
| ismap | Атрибут ismap вказує на те, що зображення є частиною зображення-карти, розташованого на сервері (зображення-карта - зображення з інтерактивними областями). При натисканні на карту зображення координати передаються на сервер у вигляді рядка запиту URL-адреси. Атрибут ismap допускається лише у випадку, якщо елемент Синтаксис: це map. |
| longdesc | URL розширеного опису зображення, що доповнює атрибут alt. Синтаксис: longdesc="http://www.example.com/description.txt". |
| src | Атрибут src вказує шлях до зображення. Синтаксис: src="flower.jpg". |
| sizes | Встановлює розмір зображення залежно від параметрів відображення. Працює лише при заданому атрибуті srcset. Значенням атрибута є один або кілька рядків, вказаних через кому. |
| srcset | Створює список джерел зображення, які будуть вибрані, виходячи з роздільної здатності екрана. Може використовуватись разом або замість атрибута src. Значенням атрибута є один або кілька рядків, розділених комою. 
|
| usemap | Атрибут usemap визначає зображення як карту-зображення. Значення повинно починатися з символу # . Значення асоціюється зі значенням атрибуту name чи id тега |
| width | Атрибут width задає ширину зображення px . Синтаксис: width = "500". |
1.1. Адреса зображення
Адреса зображення може бути вказана повністю (абсолютний URL), наприклад:
url (http://anysite.ru/images/anyphoto.png)
Або через відносний шлях від документаабо кореневого каталогусайту:
url(../images/anyphoto.png) - відносний шлях від документа,
url(/images/anyphoto.png) - відносний шлях від кореневого каталогу.
Це інтерпретується так:
../ - означає піднятися вгору на один рівень, до кореневого каталогу,
images/ — перейти до папки із зображеннями,
anyphoto.png - вказує на файл зображення.
1.2. Розміри зображення
Без визначення розміру зображення малюнок відображається на сторінці в реальному розмірі. Відредагувати розміри зображення можна за допомогою атрибутів width та height. Якщо буде заданий лише один з атрибутів, другий буде обчислюватися автоматично для збереження пропорцій малюнка.
1.3. Формати графічних файлів
Формат JPEG (Joint Photographic Experts Group). JPEG-зображення ідеальні для фотографій, вони можуть містити мільйони різних кольорів. Стискають зображення краще за GIF, але текст і великі площі з суцільним кольором можуть покритися плямами.
Формат GIF (Graphics Interchange Format). Ідеальний для стиснення зображень, в яких є області суцільного кольору, наприклад, логотипів. GIF-файли дозволяють встановити один із кольорів прозорим, завдяки чому фон веб-сторінки може виявлятися через частину зображення. Також GIF-файли можуть включати просту анімацію. GIF-зображення містять лише 256 відтінків, через що зображення виглядають плямистими і нереалістичного кольору, як плакати.
Формат PNG (Portable Network Graphics). Включає кращі риси GIF- і JPEG-форматів. Містить 256 кольорів і дає можливість зробити один із кольорів прозорим, при цьому стискає зображення в менший розмір, ніж GIF-файл.
Формат APNG (Animated Portable Network Graphics). Формат зображення на основі PNG. Дозволяє зберігати анімацію, а також підтримує прозорість.
Формат SVG (Scalable Vector Graphics). SVG-малюнок складається з набору геометричних фігур, описаних у форматі XML: лінія, еліпс, багатокутник тощо. Підтримується як статична, і анімована графіка. Набір функцій включає різні перетворення, альфа-маски, ефекти фільтрів, можливість використання шаблонів. Зображення у форматі SVG можуть змінюватись у розмірі без зниження якості.
Формат BMP (Bitmap Picture). Являє собою нестиснене (оригінальне) растрове зображення, шаблоном якого є прямокутна сітка пікселів. Bitmap-файл складається з заголовка, палітри та графічних даних. У заголовку зберігається інформація про графічне зображення та файл (глибина пікселів, висота, ширина та кількість кольорів). Палітра вказується лише у тих Bitmap-файлах, які містять палітрові зображення (8 і менше біт) і складаються не більше ніж з 256 елементів. Графічні дані представляють саму картинку. Глибина кольору в цьому форматі може бути 1, 2, 4, 8, 16, 24, 32, 48 біт на піксель.
Формат ICO (Windows icon). Формат зберігання піктограм файлів у Microsoft Windows. Також, Windows icon, використовується як значок на сайтах в Інтернеті. Саме зображення такого формату відображається поряд з адресою сайту або закладкою в браузері. Один файл ICO містить один або кілька значків, розмір і кольоровість кожного з яких задається окремо. Розмір значка може бути будь-яким, але найбільш застосовні квадратні значки зі сторонами 16, 32 та 48 пікселів.
2. Тег
Тег
Для тега доступний атрибут name , який визначає ім'я карти. Значення атрибут name для тега
Елемент
3. Тег
Тег описує лише одну активну область у складі карти зображень за клієнта. Елемент не має тега, що закриває. Якщо одна активна область перекриває іншу, то буде реалізовано перше посилання зі списку областей.
| Атрибут | Короткий опис |
|---|---|
| alt | Задає альтернативний текст для активної області картки. |
| coords | Визначає позицію області на екрані. Координати задаються в одиницях довжини і поділяються комами: для кола- координати центру та радіус кола; для прямокутника- координати верхнього лівого та правого нижнього кутів; для багатокутника- координати вершин багатокутника у потрібному порядку, також рекомендується вказувати останні координати, рівні першим, для логічного завершення фігури. |
| download | Доповнює атрибут href і повідомляє браузеру, що ресурс повинен бути завантажений в момент, коли користувач клацає посилання, замість того, щоб, наприклад, попередньо відкрити його (як PDF-файл). Задаючи ім'я для атрибута, ми таким чином задаємо ім'я об'єкту, що завантажується. Дозволяється використовувати атрибут без зазначення його значення. |
| href | Вказує URL-адресу для посилання. Може бути вказана абсолютна або відносна адреса посилання. |
| hreflang | Визначає мову пов'язаного веб-документу. Використовується лише разом з атрибутом href. Значення, що приймаються, — абревіатура, що складається з пари літер, що позначають код мови. |
| media | Визначає, для яких типів пристроїв буде оптимізовано файл. Значенням може бути будь-який медіа-запит. |
| rel | Доповнює атрибут href інформацією про відношення між поточним та пов'язаним документом. Значення, що приймаються: alternate — посилання на альтернативну версію документа (наприклад, друковану форму сторінки, переклад чи дзеркало). author — посилання автора документа. bookmark — постійна URL-адреса, яка використовується для закладок. help – посилання на довідку. license — посилання на інформацію про авторські права на цей веб-документ. next/prev — вказує зв'язок між окремими URL-адресами. Завдяки цій розмітці Google може визначити, що вміст сторінок пов'язаний в логічній послідовності. nofollow – забороняє пошуковій системі переходити за посиланнями на даній сторінці або за конкретним посиланням. noreferrer - Вказує, що переході за посиланням браузер не повинен надсилати заголовок HTTP-запиту (Referrer), в який записується інформація про те, з якої сторінки прийшов відвідувач сайту. prefetch - Вказує, що цільовий документ має бути кешований, тобто. браузер у фоновому режимі завантажує вміст сторінки до себе у кеш. search — вказує на те, що цільовий документ містить інструмент для пошуку. tag – вказує ключове слово для поточного документа. |
| shape | Задає форму активної області на карті та її координати. Може приймати такі значення: rect - активна область прямокутної форми; circle – активна область у формі кола; poly - активна область у формі багатокутника; default – активна область займає всю площу зображення. |
| target | Вказує, куди буде завантажено документ під час переходу за посиланням. Приймає такі значення: _self — сторінка завантажується у поточне вікно; _blank - сторінка відкривається у новому вікні браузера; _parent - сторінка завантажується у фрейм-батько; _top — сторінка завантажується у повне вікно браузера. |
| type | Вказує MIME-тип файлів посилання, тобто. розширення файлу. |
4. Приклад створення карти-зображення
1) Розмічаємо вихідне зображення активні області потрібної форми. Координати областей можна обчислити за допомогою програми обробки фотографій, наприклад, Adobe Photoshopабо Paint.
Мал. 1. Приклад розмітки зображення для створення картки 2) Задаємо ім'я картки, додавши його в тег
Jpg" alt="flowers_foto" width="680" height="383" usemap="#flowers">
!}
Мал. 2. Приклад створення карти-зображення, при натисканні курсору миші на квітку здійснюється перехід на сторінку з описом
Плюси
- Карти-зображення дозволяють задати будь-яку форму області посилання, що стане в нагоді для вказівки географічного району. Тому карти-зображення застосовуються найчастіше в географічній тематиці.
- З однією картинкою зручніше працювати - не доводиться дбати про стикування окремих фрагментів при розрізанні, і малюнок легко можна помістити в потрібне місце.
Мінуси
- При складній формі області посилання збільшується обсяг HTML коду. Контур апроксимується набором прямих відрізків, для кожної точки такого відрізка слід задати дві координати, а загальна кількість таких точок може бути досить великою.
- Відповідно, збільшується складність завдання координат. Вручну їх вказувати не зручно, тому доводиться користуватися спеціальними програмами, які візуально показують області та дозволяють їх редагувати.
- При зміні зображення, наприклад, при збільшенні масштабу, доведеться заново задавати координати всіх областей посилань.
- До карт-зображень не можна застосовувати різні ефекти, які доступні при розрізанні одного малюнка на фрагменти: ефект перекочування, часткова анімація, індивідуальна оптимізація картинок для швидкого завантаження.
- Немає чітко виділених меж посилань. Тому ці межі доводиться виділяти різними засобами безпосередньо на зображенні. Якщо малюнок не завантажився з якихось причин, то розібратися в наборі посилань стає проблематично.
З позиції зручності користувачів карти-зображення мають лише одну перевагу – включення посилань різноманітної форми. Це додає наочність у поданні інформації - ми обмежені прямокутної формою посилання і можемо використовувати посилання складної конфігурації для своєї мети.
Карти-зображення реалізуються у двох різних варіантах- серверному та клієнтському. У разі застосування серверного варіанту браузер надсилає запит на сервер для отримання адреси вибраного посилання та чекає відповіді з необхідною інформацією. Такий підхід потребує додаткового часу на очікування результату та окремі файли для кожної картки-зображення.
У клієнтському варіанті карта знаходиться в тому ж HTML-документі, що і посилання на зображення. Для вказівки того, що зображення є картою, застосовується атрибут usemap елемента . Як значення використовується покажчик на опис конфігурації карти, яка встановлюється за допомогою елемента
Приклад 1. Створення картки-зображення
Усередині контейнера
Елемент має такі атрибути.
- shape – визначає форму активної області. Форма може бути у вигляді кола (circle), прямокутника (rect), полігону (poly).
- alt – додає альтернативний текст для кожної області. Служить лише коментарем для заслання, оскільки на екран не виводиться. Обов'язковий атрибут за наявності href.
- title - виводить підказку при наведенні курсору на область.
- href - задає адресу документа, на який слід перейти, за своєю дією аналогічний подібному атрибуту елемента .
- coords - ставить координати активної області. Координати відраховуються у пікселях від лівого верхнього кутазображення, якому відповідає значення 0, 0. Перше число є координатою горизонталі, друге - по вертикалі. Список координат залежить від форми області.
Для кола задаються три числа - координати центру кола та радіус.
Мапа зображень (Image Map)дозволяє прив'язувати посилання фрагментів зображення. Клацаючи мишею на окремих частинах зображення, користувач може переходити за тим чи іншим посиланням різні Web-сторінки.
Карта зображення визначається парним тегом . HTML-документ може містити кілька карт зображення, тому кожній картці має бути присвоєно унікальне ім'я, яке визначається атрибутом name.
Карта зображення складається з ділянок зображення та відповідних посилань. Описує ділянку зображення і ставить йому у відповідність посилання одиночний тег .
Атрибути тега
Координати за замовчуванням вимірюються у пікселях.
Початок відліку координат – верхній лівий кут екрана, тобто.
Приклади різних форм областей карти зображень
Якщо дві описані області накладаються один на одного, то використовується посилання, що належить першій з них. Цю особливість можна використовувати в ситуації, коли користувач клацає мишею на точці, яка не належить жодній з областей карти, визначивши останню область карти прямокутником шириною і висотою на всю картинку.
Щоб використовувати зображення як карту, в тег
необхідно ввести додатковий атрибут usemap, що визначає ім'я картки зображення. Перед цим ім'ям ставиться знак "#".
Приклад використання Image Map
Під час натискання на різні області зображення змінюється колір відповідного тексту.
