21:12 Карта зображення | |
| Карта зображень (англ. image map, іноді сенсорна карта або графічна карта) — це графічний об'єкт мови розмітки HTML, пов'язаний з зображенням і містить спеціальні області (активні зони), при натисканні на які відбувається перехід за певним URL (за допомогою javascript можна встановити інші дії). Використання карт зображень дозволяє зберігати кілька посилань в одному зображенні. Для додавання карти зображень на web-сторінку використовується парний HTML-тег <MAP>, в атрибуті "name" якого зазначається унікальний у межах документа ідентифікатор карти. Всередину нього додаються непарні теги <AREA>, кожен з яких описує одну активну зону. Потім в тег <IMG>, який необхідно пов'язати з карткою, що додається атрибут usemap, що містить ім'я привязываемой карти. Значення атрибута повинно починатися зі знака решітки. При цьому в тегу <IMG> повинні бути вказані розміри зображення. name — идентификатор карты изображений. Уникален в пределах документа. В XHTML атрибут name считается устаревшим, и вместо него предлагается использовать атрибут id shape — форма активної області. Допустимі значення: circle (окружність), rect (прямокутник), poly (полігон). alt — альтернативний текст області. Служить лише коментарем для посилання, оскільки на екран не виводиться. title — дозволяє задати спливаючу підказку для активної області. coords — координати активної області. Координати відраховуються в пікселях від лівого верхнього кута зображення, якому відповідає значення "0,0". Перше число є координатою по горизонталі, друге — по вертикалі. Список координат залежить від форми області: Для кола задаються координати центру кола і радіус: <AREA coords="x,y,r"> Для прямокутника — координати лівого верхнього та правого нижнього кута: <AREA coords="x1,y1,x2,y2"> Для полігону задаються координати його вершин: <AREA coords="x1,y1,x2,y2,...,xN,yN"> При цьому, щоб "закрити" багатокутник, перша і остання пари координат X і Y мають бути однаковими. Якщо ці значення однакові, ПА (користувальницький агент) повинен обчислити додаткову пару координат, щоб закрити багатокутник. href — Визначає адресу посилання для області. Правила запису такі ж, як і для тега <А>. Нижче наведено код, що створює карту зображень і прив'язує її до зображення: <HTML-код> <Тіло> <ІМГ Ширина="500" Висота="200" usemap="#somemap" срц="upload.wikimedia.org/wikipedia/commons/e/e0/Figures_for_imagemap.png"> <Назва карти="somemap"> <Область форми="прямокутник" координатах="6, 7, 140, 196" на href="ru.wikipedia.org/Прямоугольник"> <Область форми="коло" координат="239, 98, 92" href="ru.wikipedia.org/Kpyr"> <Область форми="полі" координатах="386,16, 344,56, 350,189, 385,132, 489,190, 496,74, 386,16" на href="ru.wikipedia.org/Многоугольник"> </Карта> </Тіло> </HTML> Переваги Карти дозволяють задати будь-яку форму посилання області. Враховуючи, що комп'ютерні зображення за своєю природою прямокутні, зробити графічну посилання складної форми, наприклад, для зазначення географічного району, без карт-зображень не представляється можливим. З одним файлом зручніше працювати — не доводиться піклуватися про стикуванні окремих фрагментів. Недоліки Не можна встановити альтернативний текст для окремих областей. Альтернативний текст дозволяє отримати текстову інформацію про об'єкт при відключеній в браузері завантаженні зображень. Якщо відключити перегляд зображень, то в результаті побачимо лише один порожній прямокутник. При складній формі області посилання збільшується обсяг коду HTML. Контур складається з набору прямих відрізків, для кожної точки якої слід задати дві координати, а загальна кількість таких точок може бути досить велика. Справедливості заради, слід зазначити, що складні форми є приватним випадком і застосовуються досить рідко. З картами-зображеннями можна зробити різні ефекти, які доступні при розрізуванні одного малюнка на фрагменти: ефект перекочування, часткова анімація, індивідуальна оптимізація картинок для їх швидкого завантаження і т. д. | |
|
| |
| Всего комментариев: 0 | |
