Створення карти зображень в HTML. Побудова зображення-карти Навігаційна карта в html

.

тег має обов'язковий атрибут src, значенням якого є абсолютний або відносний шлях до зображення:

для тега доступні наступні атрибути:

Таблиця 1. Атрибути тега

Атрибут	Опис, прийняте значення
alt	Атрибут alt додає альтернативний текст для зображення. Виводиться на місці появи зображення до його завантаження або при відключеній графіку, а також виводиться спливаючій підказкою при наведенні курсору миші на зображення. Синтаксис: alt = "(! LANG: опис зображення" . !}
crossorigin	Атрибут crossorigin дозволяє завантажувати зображення з ресурсів іншого домену за допомогою CORS-запитів. Зображення, завантажені в полотно за допомогою CORS-запитів, можуть бути використані повторно. Допустимі значення: anonymous - Cross-origin запит виконується за допомогою HTTP-заголовка, при цьому облікові дані не передаються. Якщо сервер не дає облікові дані сервера, з якого запитується контент, то зображення буде зіпсовано і його використання буде обмежено. use-credentials - Cross-origin запит виконується з передачею облікових даних. Синтаксис: crossorigin = "anonymous".
height	Атрибут height задає висоту зображення в px. Синтаксис: height = "300".
ismap	Атрибут ismap вказує на те, що картинка є частиною зображення-карти, розташованого на сервері (зображення-карта - зображення з інтерактивними областями). При натисканні на зображення-карту координати передаються на сервер у вигляді рядка запиту URL-адреси. Атрибут ismap допускається тільки в разі, якщо елемент є нащадком елемента з дійсним атрибутом href. Синтаксис: ismap.
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. Тег

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

Таблиця 2. Атрибути тега

Атрибут	Короткий опис
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 =" (! LANG: flowers_foto" width="680" height="383" usemap="#flowers"> !}
Мал. 2. Приклад створення карти-зображення, при натисканні курсора миші на квітку здійснюється перехід на сторінку з описом

Привіт. Нещодавно мені довелося мати справу з такою специфічною фичей html як карта зображення. Скажу чесно, що мені не часто доводилося використовувати її, і то, як правило, все обходилося зонами в формі прямокутника. Але це був не той самий випадок. Завданням було повісити посилання на окремі регіони зображення, яким виступала карта країни, і, на жаль, ні про які кинувся або svg не могло бути й мови. Тільки html тільки хардкор! Отже, завдання поставлене, гугл активізований, можна і починати.

теорія

Почнемо мабуть з теорії, куди ж без неї. Карта зображення містить в собі два тега: map- контейнер карти і area- зона виділення. Карта не обмежена однією зоною і може містити необмежену їх кількість. тег areaкрім стандартних атрибутів має і свої власні:

• coords- координати зони виділення
• href- посилання, на яку буде проведений перехід при кліці на зону
• nohref- вказує на те, що зона не містить посилання
• shape- форма виділення
  • circle- зона виділення у вигляді кола
  • default- виділяє всю зону зображення
  • poly- зона виділення у вигляді багатокутника
  • rect- зона виділення у вигляді прямокутника
• target- визначає де буде відкриватися посилання

Щоб підключити карту до зображення, вказуємо тегу mapатрибут nameз довільним ім'ям, а на зображення вішаємо тег usemap, Значення якого вказуємо в форматі "# Ім'я".

Так як зона виділення у мене повинна була бути багатокутної, значення атрибута shape, тега area, ми вказуємо як poly - полигональная область. У такому режимі через кому вказуються координати точки відносно лівого верхнього кута - x, y. Точки також розділяються комами, що по початку при читанні такого коду викликає подив.

пишемо Paint

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

Для початку підготуємо верстку:

У #bar вставлятимуться кнопки для управління «пеінтом».
У #info буде виводиться згенерований html код.

Body (margin: 0; padding: 20px; font-family: Arial, Helvetica, sans-serif;) img (border: none; outline: none; display: block; -moz-user-select: none; -webkit-user -select: none; user-select: none;) .canvas (border: 2px solid # 333; padding: 2px; margin-bottom: 16px; display: inline-block; // display: inline; // zoom: 1; ) .canvas.draw (border-color: # 3C0;) .canvas .inner (position: relative;) .canvas .point (width: 1px; height: 1px; background-color: #fff; border: 1px solid # 000 ; overflow: hidden; position: absolute;) .bar (margin-bottom: 16px;) .info (background-color: #FCFCFC; border: 1px dotted #CCC; font-size: 12px; font-style: italic; padding : 8px; word-wrap: break-word;)
У javascript "е все досить просто. В процесі написання я використовував свою бойову бібліотечку, так що не дивуйтеся нестандартним функцій. Для початку повісимо подія mousedown на #canvas, в якому буде рендери точка на зображенні і записуватися її координати.

Var addPoint = function (e) (var e = _.getEvent (e), offset = _.getOffset (nodes [ "canvas"]), x = e.clientX + _.getDocScrollLeft () - offset, y = e. clientY + _.getDocScrollTop () - offset, node = nodes [ "canvas"]. appendChild (_. node ( "div", ( "class": "point"))); node.style.top = y-1 + "px"; node.style.left = x-1 + "px"; points.push (( "x": x, "y": y, "node": node)); e.preventDefault && e. preventDefault (); return false;);
Потім напишемо функцію, яка буде генерувати html код нашої карти.

Var renderInfo = function () (var text; _.clearNode (nodes [ "info"]); nodes [ "info"]. AppendChild (_. Node ( "span", " ")); };
Обрамити все в клас, трохи допоміжних функцій, ось і все. Сподіваюся комусь буде корисна сіючи тулза.

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

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

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

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

У цьому розділі ви дізнаєтеся:

• Що таке карта-зображення, і як вона працює
• Як створити файл конфігурації карти-зображення
• Як створити посилання в HTML-документі, використовуючи карту-зображення

Мал. 6.1.Приклад Web-сторінки, в якій основне меню зроблено за допомогою карти-зображення

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

Основи використання карт-зображень

Карти-зображення надають користувачам дружній інтерфейс для переходу на інші Web-сторінки. Щоб виконати перехід по такому посиланню, слід просто вибрати потрібне місце на зображенні і клацнути мишею. Наявність такого розвиненого графічного інтерфейсу є одним із значних переваг Web-сторінок в порівнянні з іншими ресурсами Інтернету. Замість текстових меню, подібних інтерфейсу клієнтів системи Gopher, користувачі отримують наочне графічне представлення інформації (рис. 6.2).

Мал. 6.2.Наочне уявлення посилань (на сторінки, що розповідають про сім чудес світу) за допомогою карти-зображення

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

Розглянемо основні поняття, пов'язані з використанням карт-зображень.

Термінологія

Imagemap, Image Map, Area Map, Clickable Map, Sensitive Map - всі ці англомовні терміни використовуються в довідковій літературі для позначення однієї і тієї ж можливості - використання вбудованого в HTML-документ зображення, для якого визначено "гарячі" (або активні) точки або області, що мають посилання на різні URL-адреси. Будемо описувати цю можливість словосполученням "карта-зображення", маючи на увазі під цим сукупність кількох компонентів, що забезпечують реалізацію даної концепції. Основними компонентами є: саме зображення, яке будемо називати опорним для даної карти-зображення; опис конфігурації активних областей; а також відповідне програмне забезпечення.

Графічне представлення карти-зображення

Карта-зображення фактично являє собою звичайне вбудоване графічне зображення на Web-сторінці. Ці зображення можуть мати будь-який допустимий формат (GIF або JPG). При цьому в форматі GIF може використовуватися прозорий колір, а також режим чергування рядків. Для того щоб зображення могло використовуватися в якості опорного для карти-зображення, формально не накладається ніяких додаткових обмежень.

Опис конфігурації карти-зображення

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

Варіанти реалізації карт-зображень

Концепція карти-зображення на Web-сторінках може бути реалізована в двох різних варіантах - серверний варіант (server-side imagemap) і клієнтський варіант (client-side imagemap). Остання назва часто використовують у вигляді абревіатури CSIM. Історично першим з'явився і набув поширення серверний варіант карт-зображень, який вперше був реалізований в браузері Mosaic. Серверний варіант дозволяли використовувати перші версії всіх трьох провідних браузерів. Серверний варіант може бути реалізований в двох різних форматах, які отримали своє найменування за назвами організацій-розробників - NCSA і CERN.

Останнім часом все більшого розвитку набуває клієнтський варіант, який вперше був реалізований в браузері Microsoft Internet Explorer. Починаючи з версії 2.0, цей варіант також підтримує браузер Netscape. Даний варіант має свої незаперечні переваги і стає все більш популярним.

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

У використанні карт-зображень є як позитивні, так і негативні моменти. Більшість з них носить естетичний характер, але деякі мають і технічні аспекти. Для створення хороших Web-сторінок важливо розуміти переваги і недоліки карт-зображень.

Карти-зображення найбільш зручно використовувати в наступних ситуаціях:

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

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

Незважаючи на те, що карти-зображення стали надзвичайно популярні, очевидно, що вони не є невід'ємним атрибутом Web-сторінок і використовуються далеко не на всіх сторінках. Є ситуації, коли не слід використовувати карти-зображення.

До недоліків карт-зображень можна віднести наступні:

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

Серверний варіант реалізації карт-зображень

Використання на Web-сторінках карт-зображень виявляється дещо складною справою, ніж просте вбудовування цікавих графічних зображень і зв'язування з ними посилань. Для реалізації серверного варіанту карти-зображення необхідно, щоб HTML-документ був розміщений на сервері. Також потрібно, щоб на сервері була налаштована підтримка CGI-сценаріїв (Common Gateway Interface, Загальний інтерфейс шлюзу), які виконують обробку запитів, що надходять від браузера при роботі з картою-зображенням. Для кожної карти-зображення на сервері повинен бути розміщений файл, що описує конфігурацію активних областей. При натисканні мишею в межах зображення координати місця клацання передаються браузером серверу, який звертається до конфігураційного файлу, що є, по суті, пошукової таблицею активних областей. Результат пошуку повертається браузеру у вигляді URL-адреси або повідомлення про відсутність знайдених активних областей, відповідних вказаного місця зображення.

Для забезпечення функціонування карти-зображення необхідно вказати, що дане зображення є опорним для карти. Це виконується завданням параметра ISMAP в тезі . Крім того, карту-зображення необхідно зробити посиланням на Web-сторінці, багато в чому подібно до того, як це робилося при використанні всього зображення в якості окремої посилання.

Нагадаємо, що вбудовані зображення можуть використовуватися як гіпертекстові посилання, якщо вони включені в тег<А>. Наприклад, щоб зробити зображення з ім'ям Myimage.gif графічним покажчиком посилання на документ в тому ж самому каталозі з іменем exampie.html, слід записати:

<А HREF=example.html >

Цей HTML-код повідомляє серверу, що при натисканні на зображенні Mylmage.gif браузеру повинен бути повернутий Документ З ім'ям example.html.

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

<А HREF=MyImage.map>< IMG SRC=MyImage.gif ISMAP>< /A>

Посилання в цьому прикладі є не адресу іншого HTML-документа, а файл конфігурації карти-зображення, який містить координати для кожної активної області зображення з ім'ям Myimage.gif.

Примітка

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

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

Порада

Для кожної карти-зображення необхідний окремий файл конфігурації. Прийміть за правило зберігати файл конфігурації в тому ж самому каталозі і з тим же ім'ям, що і пов'язане з ним зображення. Наприклад: main_menu.gif і main menu.map.

Існують два формати файлів конфігурації карт-зображень, розроблені в CERN і NCSA і носять назви цих організацій. Обидва цих формату містять однакову інформацію, але по-різному її представляють. В обох випадках використовуються одні й ті ж типи областей, про які йтиметься нижче. При розробці карт-зображень для використання на конкретному сервері необхідно отримати у адміністратора системи відомості про прийняте на даному сервері способі підтримки карт-зображень.

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

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

Порада

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

формат CERN

CERN - це європейський науковий центр, Тематика досліджень якого досить широка. Саме тут була розроблена концепція системи World Wide Web, Яка стала поштовхом всіх розробок в області WWW. По праву CERN можна вважати батьківщиною Web. Коли виникла необхідність розробки структури файлів конфігурації карт-зображень, в CERN був запропонований наступний формат:

тип області координати URL-адресу

Значення пар координат X і Y розділяються комою і полягають в круглі дужки. Формат CERN не допускає використання коментарів для пояснення посилань, пов'язаних з тією чи іншою областю. Це можуть бути такі типи областей: rect, circle, poly і default. Цей формат допускає двояке написання назв типів областей - як у скороченій, так і в повній формі. Поряд з наведеними назвами типів можуть використовуватися назви rectangle, circ і polygon.

Наведемо приклад запису інформації про ділянки на карті-зображенні в форматі CERN:

rect (56,47) (357,265) http://www.anywhere.com/

circ (366,147) 109 http://www.anywhere.com/

polygon (534,62) (699,62) (698,236) (626,261) (534,235) (534,62)

http://www.anywhere.com/

формат NCSA

Національний центр суперкомп'ютерних додатків NCSA (National Center for Supercomputing Applications) університету штату Іллінойс також вніс значний вклад в розвиток Web. Тут був створений перший популярний графічний браузер - програма Mosaic. У NCSA був запропонований формат конфігураційного файлу, що відрізняється за формою записи від формату CERN. Цей формат має наступний вигляд:

тіп_області URL-адресу координати

Це можуть бути такі типи областей: rect, circle, poly, default і point.

Координати X і Y відокремлюються комами, але не укладаються в круглі дужки. У цьому форматі допускається використання рядків коментарів. Будь-яка рядок, що починається з символу #, буде розглядатися як коментар, і її вміст буде ігноруватися програмою інтерпретації.

Формат NCSA пропонує кілька відмінний спосібдля завдання кругових областей (в порівнянні з форматом CERN і розглядаються нижче клієнтським варіантом). Кругова область задається координатами двох точок - центру і будь-якої точки, що лежить на колі.

Примітка

Формат NCSA допускає використання типу області point (точкова область). Цей тип області не застосовується ні в форматі CERN, ні при використанні клієнтського варіанти карт-зображень. Задум творців формату полягав в тому, що при наявності ряду точкових областей після клацання миші активізувалася посилання, що знаходиться ближче інших. Однак, наявність такого типу області, по суті, входить в протиріччя з типом області default, так як при одночасному використанні областей point і default реалізація посилання, визначеної типом point, можлива тільки при точному попаданні в дану точкумишею. Це досить важко і навряд чи створить комфортні умови при роботі з таким документом. В даний час тип point практично не застосовується, причому всі інтенсивніше розвивається клієнтський варіант карт-зображень.

Наведемо приклад записи конфігураційного файлу формату NCSA:

# Приклад запису конфігураційного файлу

rect http://www.anywhere.com/ 56,47 357,265

circle http://www.anywhere.com/ 366,147 366,256

poly http://www.anywhere.com/ 534,62 699,62 698,236 626,261 534,235 534,62

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

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

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

Примітка

Браузер Netscape не допускає використання окремого файлудля опису конфігурації карти.

наприклад:

У цьому прикладі зображення, що зберігається у файлі з ім'ям l ogo.gif, є опорним для карти-зображення, реалізованої в клієнтському варіанті.

Опис конфігурації активних областей повинне розташовуватися в тому ж файлі, що і даний рядок HTML-коду, і мати для цього прикладу ім'я logo.

Тег<МАР>

Для опису конфігурації областей карти-зображення використовується спеціальний тег<МАР>, Єдиним параметром якого є NAME. Значення параметра NAME визначає ім'я, яке повинно відповідати імені в USEMAP. тег<МАР>вимагає закриває тега. Усередині цієї пари тегів повинні розташовуватися опису активних областей карти, для чого використовується спеціальний тег .

Тег

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

параметрами тега є SHAPE, COORDS, HREF, NOHREF, TARGET, і ALT. Розглянемо призначення цих параметрів.

параметр SHAPE

Параметр SHAPE визначає форму активної області. Допустимими значеннями є rect, circle, poly, default. Ці значення задають області у вигляді прямокутника, кола, багатокутника. Останнє значення - default - визначає всі крапки області. Якщо параметр SHAPE опущений, то за умовчанням передбачається значення rect, т. Е. Область у вигляді прямокутника.

попередження

Не слід плутати область типу default, яка описує всі крапки зображення, і значення параметра SHAPE за замовчуванням, яким є rect.

Примітка

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

Порада

Відзначимо також, що не всі браузери підтримують тип області default. Зокрема, Microsoft Internet Explorer взагалі не дозволяє використовувати даний тип області. Тому замість області типу default можна рекомендувати завдання прямокутної області з розмірами, що дорівнюють розмірам всього зображення. Природно, що така область повинна описуватися останньої. Саме так чинять деякі програми редагування карт-зображень, які будуть розглядатися нижче.

параметр COORDS

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

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

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

Для області типу poly задаються координати вершин багатокутника в потрібному порядку. Зауважимо, що остання точка в списку координат не обов'язково повинна збігатися з першої. Якщо вони не збігаються, то при інтерпретації даних для цієї форми області браузер автоматично з'єднає останню крапку з першої. Різні редактори карт-зображень в цьому відношенні працюють по-різному - одні додають першу точку в кінець списку, а інші - ні. Кількісні обмеження на число вершин досить великі і покривають практично всі мислимі потреби. Принаймні багатокутник, що має 100 вершин, впевнено обробляється усіма провідними браузерами. Є обмеження, пов'язане з самим мовою HTML, згідно з яким список не може містити більше 1024 значень. Багатокутник цілком може бути неопуклого.

Область типу default не вимагає завдання координат.

Параметри HREF і NOHREF

Параметри HREF і NOHREF є взаємовиключними. Якщо не заданий жоден з цих параметрів, то вважається, що для даної області немає посилання. Те ж саме явно визначає параметр NOHREF, що не вимагає значення. Параметр HREF визначає адресу посилання, який може записуватися в абсолютній або відносній формі. Правила запису повністю збігаються з правилами запису посилань в тезі<А>.

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

параметр TARGET

Параметр TARGET вживається при роботі з фреймами. Його призначення - вказати ім'я фрейма, в який буде розміщений документ, що завантажується за цим посиланням. Більш детальну інформацію про використання цього параметра можна отримати з розділу, присвяченого роботі з кадрами.

параметр ALT

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

Наведемо приклад завдання областей різних типів:

<МАР NAME="logo">

!}

HREF = "p.htm" ALT = "(! LANG: Багатокутник"> !}

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

Комбінація клієнтського і серверного варіантів

Можливе використання комбінованого варіанту, при якому для одного і того ж зображення визначені обидва параметри - USEMAP і ISMAP, що передбачає використання даного зображення в якості опорного як для клієнтського, так і для серверного варіанту. Параметр USEMAP є домінуючим. Це означає, що браузер, який підтримує клієнтський варіант, буде використовувати USEMAP, ігноруючи вказівки параметра ISMAP. Ті браузери, які не підтримують клієнтський варіант і не зрозуміють призначення параметра USEMAP, згідно із загальними правилами HTML проігнорують його наявність і реалізовуватимуть серверний варіант, виявивши присутність параметра ISMAP. Комбінований варіант є більш надійним, однак вимагає наявності даних для конфігурації областей для обох варіантів. В даний час необхідність використання комбінованого варіанту дедалі знижується, так як всі провідні браузери здійснюють підтримку клієнтського варіанту. Проте, початкові сторінки компанії Netscape, з якими напевно стикався кожен користувач браузера Netscape, зроблені саме в комбінованому варіанті.

Наведемо приклад комбінованого варіанту:

<А HREF="http://www.anywhere.com/testmap/logo.map">

Примітка

Параметр USEMAP також є домінуючим по відношенню до заслання, яка визначається тегом<А>. Так, якщо зображення, яке використовується для реалізації концепції карти-зображення в клієнтському варіанті, записано всередині області дії тега<А HREF>, То посилання, що визначається останнім тегом, буде проігнорована браузерами, що підтримують клієнтський варіант. Нехай, наприклад, є наступний фрагмент:

<А HREF=NoMaps.htm> .

З одного боку, все зображення є посиланням на документ з ім'ям NoMaps.htm. З іншого боку, наявність параметра USEMAP визначає дане зображення як опорна для відповідної карти-зображення. Посилання на документ NoMaps.htm буде ігноруватися вже завдяки присутності параметра USEMAP і незалежно від інших факторів.

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

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

Альтернативні засоби навігації

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

В якості альтернативного варіанту можна створити окремий розділ з текстовим описом посилань і відповідних URL-адрес. Можна також створити посилання на текстове меню, яке має ті ж самі зв'язку, що і карта-зображення. При будь-якому підході, який би не був обраний, потрібно переконатися, що для текстового режиму браузера доступні всі посилання.

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

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

Засоби створення карт-зображень

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

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

Для автоматизації процесу розмітки областей на зображенні існує ряд програм, більшість з яких дуже схожі один на одного. Вони дозволяють створювати і змінювати файли конфігурації, працюючи безпосередньо з зображенням на екрані. Більшість програм є окремі утиліти, що працюють автономно і, по суті, є доповненням до HTML-редакторам. Ці програми дозволяють зберігати створюваний конфігураційний файл або в буфері обміну Windows, або в файлі на диску. У першому випадку типовим варіантом є спільна робота програми редагування карти-зображення і будь-якого HTML-редактора або звичайного текстового редактора. Якщо ж програма дозволяє зберігати конфігураційний файл на диску, то вона може використовуватися повністю автономно. Всі програми дозволяють розмічати на зображенні області трьох основних типів - rect, circle і poly. Деякі редактори підтримують тип default. Мабуть, єдиним критерієм вибору програми редагування карт-зображень є зручність її використання, так як за функціональними властивостями всі програми дуже близькі. Якщо інтерфейс програми здасться вам незручним, можна відмовитися від її використання і вибрати іншу.

Розглянемо деякі з існуючих програм.

програма MapEdit

Однією з найбільш простих і відомих програм редагування конфігураційних файлів є утиліта MapEdit, розроблена Томасом Бу-Телль (Thomas Boutell). Ця програма існує вже протягом декількох років і реалізована для різних платформ. Зокрема, є версії для Windows 3.x і Windows 95/98 / NT. Як і для більшості програм, існував ряд версій даної утиліти. На поточний момент останньої доступною версією для Windows 95/98 / NT є ​​версія 2.6 (вересень 1999 г.). Інформацію про програму можна отримати за адресою:

http: //www.boutell.cora/mapedit/

Програма MapEdit є умовно-безкоштовною (shareware) і має 30-денний оцінний період, після закінчення якого необхідна її реєстрація. Програма невелика за розміром - дистрибутив займає близько 300 Кб, і при цьому володіє практично всіма необхідними можливостями.

Програма дозволяє редагувати конфігураційні файли як для серверного варіанту (в форматах NCSA і CERN), так і для клієнтського. Є можливість візуального створення активних областей в формі прямокутників, кіл і багатокутників, а також визначення адреси посилання для області за замовчуванням.

Розглянемо коротко основні можливості даної програми. Після запуску MapEdit видається основне вікно, що містить заставку (рис. 6.3) і меню. Є можливість редагування існуючих файлів як для серверного, так і для клієнтського варіантів карт-зображень. Є можливість також створення нового файлу конфігурації, проте це стосується тільки серверного варіанту. Для клієнтського варіанту необхідна наявність вихідного HTML-файлу з посиланнями на вбудовані зображення, які будуть використовуватися в якості опорних для карт-зображень.

Примітка

Неможливість створення нового HTML-файлу за допомогою програми MapEdit можна легко обійти. Для цього слід запустити програму в режимі створення файлу в одному з форматів серверного варіанту (NCSA і CERN), виконати всі необхідні дії, а потім зберегти отримані результати в режимі Save as, вказавши при цьому формат Client Side Map. Буде створено HTML-файл, який в подальшому можна використовувати в якості готового фрагмента HTML-документа.

Нехай нам необхідно створити новий конфігураційний файл для серверного варіанту карт-зображень. Виберемо пункт Open / Create Map з меню

File. З'явиться діалогове вікно (рис. 6.4), в якому слід задати ім'я створюваного файлу конфігурації (наприклад, Blazons.map), вказати існуючий файл із зображенням і формат створюваного файлу (NCSA або CERN). Файл зображення може мати формат GIF, JPG або PNG.

Мал. 6. 3 . заставка MapEdit

Мал. 6. 4 . Діалогове вікно Open / Create Map для створення конфігураційного файлу

Примітка

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

Програма завантажить вибраний файл із зображенням, на якому можна буде зробити розмітку активних областей (рис. 6.5).

Для цього потрібно вибрати форму активної області - прямокутник, коло або прямокутник шляхом натискання відповідної піктограми або вибору потрібного пункту з меню Tools (рис. 6.6).

Подальші дії проводяться безпосередньо на зображенні шляхом позначки точок мишею. Для прямокутної області відзначають лівий верхній і правий нижній кути, для кругової області - центр і одну з точок на окружності, для багатокутника задаються його вершини. Для прикладу на рис. 6.5 показаний випадок, коли на зображенні вже розмічені три активних області різної форми. Зауважимо, що лінії, що обмежують активні області, служать лише для їх візуалізації при роботі в редакторі і ніяк не змінюють файл із зображенням. Зображення в даному прикладі по суті містить три окремих картинки (зображені герби міст Санкт-ПетербургТомск і Якутськ), що зазвичай не характерно для реалістичних зображень. Однак для зображень, що містять, наприклад, набір кнопок управління, така ситуація досить типова.

Мал. 6. 5 . Зображення з розміченими активними областями різного типу

Мал. 6. 6 . Меню Tools

Мал. 6. 7 . Діалогове вікно Object URL для завдання URL-адреси та необов'язкового коментаря

Після розмітки будь-який з областей слід задати адресу посилання, що відповідає даній області, а також коментують інформацію (рис. 6.7). Можна задати адресу посилання для області за замовчуванням, який буде peaлізовиваться для частини області зображення, що не входить ні в одну з активних областей (рис. 6.8).

Після розмітки областей можна візуально проконтролювати або змінити створені активні області, скориставшись пунктом Test меню Edit. Останнім кроком роботи є збереження результатів у вигляді файлу конфігурації (пункт Save меню File). Можна також використовувати пункт Save As, в якому задати необхідний формат збереження файлу (рис. 6.9).

Мал. 6. 8 . Діалогове вікно Default URL для завдання URL-адреси для області за замовчуванням

Мал. 6. 9 . Діалогове вікно команди Save As

Примітка

Більш ранні версії редактора MapEdit містили невелику помилку, пов'язану з завданням формату файлу конфігурації. Якщо при створенні файлу було вказано формат CERN, то при збереженні даних в режимі Save файл все одно буде збережений у форматі NCSA. Створити файл формату CERN вдається тільки при використанні режиму Save as із зазначенням необхідного формату.

Для розглянутого прикладу буде створено файл з ім'ям Blazons.map, що містить наступну інформацію (формат NCSA):

# Герб міста Томськ

rect www.ifmo.ru/sergeev/tomsk.htm 35,58 187,244

# Герб міста Якутськ

circle www.ifmo.ru/sergeev/jakutsk.htm 364,150 468,150

# Герб міста Санкт-Петербург

poly www.ifmo.ru/sergeev/Spb.htm 537,61 700,61 700,230 618,256 537,231

Ті ж дані, збережені редактором у форматі CERN, будуть виглядати наступним чином:

rect (35,58) (187,244) www.ifmo.ru/sergeev/tomsk.htm circle (364,150) 104 www.ifmo.ru/sergeev/jakutsk.htm poly (537,61) (700,61) (700,230) (618,256) (537,231) www.ifmo.ru/sergeev/Spb.htm

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

Розглянемо задачу створення клієнтського варіанту карти-зображення. Для вирішення цього завдання необхідно наявність вихідного HTML-файлу, що містить хоча б одне вбудоване зображення. Даний вихідний файл може бути створений заздалегідь будь-яким текстовим редактором або спеціальним HTML-редактором. Нехай є файл з ім'ям CSIM.HTM, що містить наступний код:

Цей файл слід відкрити в редакторі MapEdit (рис. 6.10). На відміну від варіанту, в якому виконувалося створення конфігураційного файлу, тут не потрібно вказувати імені файлу із зображенням в пункті меню Open / Create Map.

Мал. 6.1 0 . Діалогове вікно Open / Create Map для відкриття існуючого HTML-файлу

Мал. 6.1 1 . Діалогове вікно Select Inline Image

Редактор після відкриття вихідного HTML-файлу видасть діалогове вікно з переліком всіх вбудованих зображень, з якого необхідно вибрати потрібну (рис. 6.11). Звичайно, файл з вибраними зображеннями повинен існувати.

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

href = "tomsk.htm">

href = "jakutsk.htm">

coords = "537,61,700,61, 700, 230, 618, 256, 537,231" href = "Spb.htm">

Зверніть увагу, що редактор автоматично привласнює ім'я для опису карти-зображення, яке збігається з ім'ям файлу опорного зображення. Для даного прикладу файл із зображенням мав ім'я Blazons.gif, тому параметру name тега<тар>було присвоєно значення "Blazons".

Примітка

Редактор MapEdit не зовсім коректно працює з символами російського алфавіту. Частина російських букв при збереженні файлу зникають і на їх місці виявляються прогалини. Найпростішим виходом з цієї ситуації є додавання російського тексту після завершення роботи в редакторі.

Програма Map THIS!

Ще однією утилітою створення і редагування конфігураційних файлів карт-зображень є програма Map THIS !, інформацію про яку можна отримати за адресою:

http://galadriel.ecaetc.ohio-state.edu/tc/mt/.

Робота з даною програмою по ідеології схожа з програмою MapEdit. Основою роботи з програмою є візуальне конструювання активних областей з подальшим збереженням результатів у файлі в одному з вибраних форматів. Редактор підтримує обидва формати серверного варіанту карт-зображень (NCSA і CERN) і клієнтський варіант. Зображення можуть завантажуватися з файлів у форматах GIF і JPG.

Наведемо приклади файлів конфігурації, створених даною програмою. Для прикладу, наведеного в попередньому розділі, файл, збережений у форматі NCSA, матиме такий вигляд:

# $ MTIMFH

# $ -: Image Map file created by Map THIS!

# $ -: Map THIS! free image map editor by Todd C. Wilson

# $ -: Please do not edit lines starting with "# $"

# $ VERSION: 1.30

# $ TITLE: Blazons

# $ DESCRIPTION: Серверна варіант карти-зображення

# $ DATE: Tue Sep 14 12:10:42 1999

# $ PATH: З: \ Program Files \ Mapthis \

# $ GIF: Blazons.gif

# $ FORMAT: ncsa

# $ EOH

default default.htm

# Герб міста Томськ

rect Tomsk.htm 33,60 191,246

# Герб міста Якутськ

circle Jakutsk.htm 366,147 366,256

# Герб міста Санкт-Петербург

poly Spb.htm 534,62 699,62 698,236 626,261 534,235 534,62

На відміну від програми MapEdit, даний редактор записує у вихідний файл досить багато комментирующей інформації, що включає короткі відомості про саму програму, датою створення файлу та ін. При цьому після символу #, що означає початок рядка коментаря, редактор додає символ $ для рядків-коментарів, створюваних самим редактором. Зверніть увагу на четверту сходинку наведеного коду, в якій міститься прохання не редагувати коментарі, вставлені редактором.

Той же приклад, який було збережено в форматі CERN, буде мати вигляд:

rect (4096,4096) (4096,4096) mt: # $ MTIMFH

rect (4096,4096) (4096,4096) mt: # $ -: Image Map file created by Map THIS!

rect (4096,4096) (4096,4096) mt: # $ -: Map THIS! free image map editor

by Todd C. Wilson

rect (4096,4096) (4096,4096) mt: # $ -: Please do not edit lines starting

with "# $"

rect (4096,4096) (4096,4096) mt: # $ VERSION: 1.30

rect (4096,4096) (4096,4096) mt: # $ TITLE: Blazons

rect (4096,4096) (4096,4096) mt: # $ DESCRIPTION: Серверна варіант

карти-зображення

rect (4096,4096) (4096,4096) mt: # $

rect (4096,4096) (4096,4096) mt: # $ DATE: Tue Sep 14 12:10:42 тисячі дев'ятсот дев'яносто дев'ять

rect (4096,4096) (4096,4096) mt: # $ PATH: З: \ Program Files \ Mapthis \

rect (4096,4096) (4096,4096) mt: # $ GIF: Blazons.gif

rect (4096,4096) (4096,4096) mt: # $ FORMAT: cern

rect (4096,4096) (4096,4096) mt: # $ EOH

default default.htm

rect (4096,4096) (4096,4096) mt: # Герб міста Томськ

rectangle (33,60) (191,246) Tomsk.htm

rect (4096,4096) (4096,4096) mt: # Герб міста Якутськ

circ (366,147) 109 Jakutsk.htm

rect (4096,4096) (4096,4096) mt: # Герб міста Санкт-Петербург

polygon (534,62) (699,62) (698,236) (626,261) (534,235) (534,62) Spb.htm

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

rect (4096,4096) (4096,4096),

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

Той же приклад, збережений у вигляді HTML-файлу (для клієнтського варіанти карт-зображень) матиме вигляд:

<МАР NAME="Blazons">

ALT = "(! LANG: Герб міста Томськ"> !}

ALT = "(! LANG: Герб міста Якутськ"> !}

HREF = "Spb.htm" ALT = "(! LANG: Герб міста Санкт-Петербург"> !}

Тут, на відміну від програми MapEdit, ім'я карти-зображення необхідно ставити вручну, тому воно може і не збігатися з ім'ям файлу з опорним зображенням.

програма CrossEye

Програма-редактор конфігураційних файлів CrossEye, створена відомою австралійською компанією Sausage Software. Ця програма буде зустрінута з радістю шанувальниками популярного HTML-редактора HotDog, оскільки вона створена тією ж компанією і має вельми привабливий, виконаний з гумором, інтерфейс.

Інформація про пакет CrossEye може бути отримана за адресою:

http://www.sausage.com.au.

Відмінними рисами програми є досить великий розмір дистрибутива (близько 2,5 Мб), а також невеликий період часу (14 днів), протягом якого можна її експлуатувати в режимі оцінки. Великий розмір програм характерний для всього програмного забезпечення, що створюється компанією Sausage Software, що, мабуть, обумовлено вибором інструментарію, що використовується для розробки (Visual Basic).

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

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

Для клієнтського варіанту карти-зображення редактор взагалі не пропонує поставити URL-адресу для області за замовчуванням. Можливо, це зроблено спеціально, так як не всі браузери підтримують тип області default. Проте, редактори, описані вище, цю проблему вирішують дуже витончено, автоматично замінюючи область за замовчуванням на прямокутну область з розмірами, що дорівнюють розмірам зображення.

Недоліки в деякому сенсі компенсуються окремими додатковими властивостями редактора. Зокрема, можна дізнатися, що папуги, який видно в правому верхньому куті наведеного рисунка, звуть Поллі. Він дуже говіркий, і користувачі, що працюють на комп'ютері, оснащеному звуковою картою, Час від часу будуть чути вигуки папуги, які, правда, ніяк не пов'язані з виконуваними діями. А в одному з діалогових віконнастройки редактора є навіть спеціальний пункт, що дозволяє заткнути рот бідному папузі. Ось приклад сервісу вищого розряду. Мабуть, завдяки перерахованим властивостям, рейтинг цього редактора за оцінками http://www.tucows.com, Досить високий, чого не можна сказати про двох описаних вище програмах.

В кінцевому підсумку вибір редактора для створення карт-зображень залишається за користувачем.

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

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

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

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

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

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