Петька Сокольников » map http://blog.xyz.net.ua блог программиста Sat, 17 Apr 2010 08:34:56 +0000 en hourly 1 http://wordpress.org/?v=3.0 Автоматизированное создание сложных HTML-карт (map & area) http://blog.xyz.net.ua/2009/09/11/html_map_and_area/ http://blog.xyz.net.ua/2009/09/11/html_map_and_area/#comments Fri, 11 Sep 2009 13:30:20 +0000 Петька Сокольников http://blog.xyz.net.ua/?p=52 Во время разработки одного из проектов появилась нужда сделать сложную HTML-карту. До этого сталкивался с более простыми, когда у какого-либо изображения надо было выделеть пару-тройку активных областей в виде прямоугольника или круга. Зная размеры изображения прикинуть координаты этих областей можно и на глаз, и потом, если что, то немного подогнать.

map_example

Но как быть, когда сделать карту надо посложнее, как на картинке выше? Понятное дело, что подобрать координаты границ таких ломанных областей на глаз не получится, и надо какое-нибудь средство, которое бы помогло нам в этом. Таким средством у нас будет Adobe ImageReady

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

screen_1

Рис. 1: Открытый проект с изображением. (кликабельно)

Выделяем область, которая должна быть активной. В моем случае для этого можно использовать Magic Wang Tool.

Рис. 2: выделение участка изображения.

Рис. 2: выделение участка изображения.

После этого в списке слоёв жмем правой кнопкой мыши, и выбираем Layer via copy. Таким образом получается новый слой, в котором содержится выделенный участок изображения. На полученном слое тоже жмем правой кнопкой мыши и выбираем опцию New Layer Based Image Map Area.
Далее открываем панель для работы с html-картой. Для этого в меню Window ставим галочку напротив Image Map.

Рис. 3: включение панели Image Map

Рис. 3: включение панели Image Map

Там для текущего участка карты устанавливаем параметры URL, Traget, Alt (надеюсь не надо объяснять что это), а так же выбираем Shape: Polygon и выбираем уровень качества (больше качества – больше точности, но на выходе получим больше кода, поэтому смотрите сами).
Таким образом мы имеем одну выделенную область. Далее возвращаемся в слой с картой, и проделываем опять все операции с новой областью.

Когда все области выделенны, делаем File – Save Optimized As, и сохраняем оптимизрованный результат.
Если всё сделали правильно, то на выходе мы должны получить папку с картой, и html-документ с размеченной картой.

То, что получилось в итоге у меня можно посмотреть тут: http://tutorials.xyz.net.ua/html_map_and_area/
На практике карту, размеченную в Adobe ImageReady я использовал в верстке макета для getfreunde.de, который можно посмотреть тут: http://portfolio.xyz.net.ua/getfreunde.

]]> http://blog.xyz.net.ua/2009/09/11/html_map_and_area/feed/ 0