Автоматизоване створення складних HTML-карт (map – area), PHP програміст

блог програміста

Автоматизоване створення складних HTML-карток (map & area)

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

створення

Але як бути, коли зробити карту треба складніше, як на зображенні вище? Зрозуміло, що підібрати координати меж таких ламаних областей на око не вийде, і треба якийсь засіб, який би допоміг нам у цьому. Таким засобом у нас будеAdobe ImageReady

Спочатку відкриваємо наше зображення, на якому необхідно зробити активну карту в Adobe ImageReady (я використовую версію CS).

автоматизоване

Мал. 1: Відкритий проект із зображенням. (клікабельно)

Виділяємо область, яка має бути активною. У моєму випадку для цього можна використовуватиMagic Wang Tool.

складних

Мал. 2: виділення ділянки зображення.

складних

Мал. 3: увімкнення панелі Image Map

Там для поточної ділянки карти встановлюємо параметри URL, Traget, Alt (сподіваюся не треба пояснювати, що це), а так само вибираємоShape: Polygon і вибираємо рівень якості (більше якості - більше точності, але на виході отримаємо більше коду, тому дивіться самі). Таким чином маємо одну виділену область. Далі повертаємось у шар з картою, і проробляємо знову всі операції з новою областю.

Коли всі області виділені, робимоFile - Save Optimized As, і зберігаємо оптимізований результат. Якщо все зробили правильно,то на виході ми повинні отримати папку з карткою, і html-документ із розміченою карткою.