| ||
Еще раз о клиентских картахГ. Туманов Недавно в одном из уважаемых мной изданий прочитал статью о создании клиентских карт (image-maps). Для автоматизации оконтуривания изображения автор приспособил CorelDraw, создав специальный скрипт, который дает существенные преимущества по сравнению с ручной технологией. Я же хочу показать другой, гораздо более простой, способ решения данной задачи. На всякий случай пара вводных слов. Клиентская карта - это рисунок с выделенными на нем областями. Указав на такую область можно перейти по ссылке либо выполнить скрипт. Область описывается прямоугольником, окружностью или полилинией, причем описывать сложные формы вручную довольно трудоемко, ведь чем точнее мы хотим оконтурить изображение, тем больше точек нужно оцифровать. Взгляните на этот рисунок (щелкните по нему, чтобы познакомиться собственно с картой). С точки зрения построения клиентской карты в нем присутствуют довольно сложные конфигурации, ручное описание которых не принесло бы удовольствия. А знаете сколько времени заняло его создание? Четыре минуты. Рисунок сделан в Visio 2002. Инструмент, не распространенный среди веб-дизайнеров, некоторые о нем вообще не слышали, а зачастую его просто используют только чтобы схемку для курсового нарисовать. Все возможности Visio я здесь рассматривать не буду (о них можно почитать, например, на visio.by.ru), присмотримся повнимательнее к приведенному рисунку. Что было сделано за 4 минуты:
Все. Заметили, что в этом перечне совершенно не упоминались MAP, AREA, полилинии и т.д.? Правильно. Visio сделал все сам. С размахом, свойственным Microsoft, Visio нагородил по этой команде кучу всякого барахла, включая css, js, xml и т.д., из которых для данной статьи использованы только gif с изображением и фрагмент html, содержащий клиентскую карту (карта не переделывалась). В общем случае подобный подход Visio ориентирован на конвертирование и публикацию многостраничных документов, в которых можно просматривать пользовательские свойства отдельных фрагментов изображения, например, схемы локальной сети. Используя элементы навигации можно перемещаться по отдельным листам-подсхемам, а при прохождении курсора мыши над каждым элементом сети в отдельном фрейме показываются его характеристики (пользовательские свойства). Если кому интересны подробности, то разбор примера автоматической прорисовки такой сети и публикации ее в html приведен в статье visio.by.ru/biblio/st005.htm. Там в архиве выложена и вся папка, сформированная Visio в процессе публикации, так что можно рассмотреть содержимое. В нашей же более простой задаче из всего полученного материала вручную были выбраны два файла, из которых и получился показанный пример. Естественно, время оформления примера я в 4 минуты не засчитывал, это ведь уже отношения к клиентской карте не имеет. Если посмотреть на исходный текст примера, то видно, что Visio упрощает себе задачу и для любой фигуры строит полилинию. Тщательность вычисления контура приводит к некоторой избыточности, так самая мощная фигура в примере обведена линией из более чем 500 точек. Хотя не такая уж это большая нагрузка, зато пройдя мышкой по лабиринту можно оценить точность оконтуривания - вручную такого добиться тяжело (терпения не хватит). Области area строятся не для всех элементов рисунка, а только для тех, которым назначены пользовательские свойства (ведь в глобальной задаче именно их и надо показывать в опубликованном документе). Таким элементом может быть как графический примитив типа прямоугольника, так и сложный рисунок. Если несколько более простых изображений объединяются в группу, то оконтуривается группа как единый объект. Возможности управления конвертированием не слишком велики, разрешается:
И заключение. Я не призываю забыть все редакторы типа ImageReady, Corel Draw, Fireworks и т.д. и делать все с помощью Visio, но хочу отметить, что иногда и для веб-дизайна он может оказаться очень полезным инструментом. Домашняя страница автора: visio.by.ru - решение всех вопросов с Visio
| ||
Copyright © "Internet Zone", http://www.izcity.com/, info@izcity.com |