Форум dkLab и Denwer
Здесь общаются Web-разработчики.
Генеральный спонсор:
Хостинг «Джино»

Lightmapper/v - интерактивные карты изображений с использованием векторной графики. (Dmitry Khudorozhkov)
Author Message
Dmitry Khudorozhkov
Участник форума



Joined: 20 Feb 2007
Posts: 65
Карма: 7
   поощрить/наказать

Location: Россия, Московская Область, г. Жуковский

PostPosted: Thu May 31, 2007 3:44 am (написано за 20 минут 21 секунду)
   Post subject: Lightmapper/v - интерактивные карты изображений с использованием векторной графики.
Reply with quote

Мой предыдущий (forum.dklab.ru/viewtopic.php?t=25829) скрипт позволяет создавать интерактивные карты изображений ("image maps"). Существенный недостаток метода, использованного в этом скрипте, заключается в долгом (иногда - очень долгом) процессе подготовки отдельных изображений ("rollover images"), которые "всплывают" при наведении курсора на соответствующую область.

Данный скрипт - Lightmapper/v - не использует изображения; вместо этого используются встроенные в современные браузеры возможности вывода векторной графики через интерфейсы VML (MS Internet Explorer) и SVG (Mozilla/Opera/все остальные браузеры).

Алгоритм работы скрипта принципиально ничем не отличается от предыдущей работы. Первое существенное отличие - позиционируются не изображения, а динамически создаваемые через SVG/VML многоугольники. Фигуры создаются кросс-браузерной библиотекой (написана мной), определяющей поддерживаемый стандарт и перенаправляющей запросы в соответствующие обработчики. Ознакомиться с design rationale и принципами работы библиотеки можно в моей статье "Bridge design pattern with JavaScript (www.codeproject.com/jscript/jbridge.asp)".

Второе отличие: каждая область карты изображений может иметь не одно (как в исходном скрипте), а произвольное количество связанных областей. Особенно круто это выглядит, например, в случае с Данией или Грецией (см. пример в архиве).

Параметры конструктора:
Code (JavaScript): скопировать код в буфер обмена
function LightmapperV(mapId,     // значение аттрибута id/name карты областей,
                      imgId,     // значение аттрибута id изображения (IMG), ассоциированному с картой областей
                      mouseOver, // глобальный (= действующий на все области) обработчик события onMouseOver,
                      mouseOut,  // глобальный  обработчик события onMouseOut,
                      bindings)  // массив массивов вида:
                                 //
                                 // [area_id, rgb, x_displacement, y_displacement, on_mouse_over, on_mouse_out, linked_area_id_1, ...]
                                 //
                                 // где:
                                 //
                                 // area_id        - значение аттрибута id области;
                                 //
                                 // rgb            - цвет, которым будет выделяться область;
                                 //
                                 // x_displacement - смещение в гориз. плокости - экспериментально находимое значение,
                                 //                  необходимое для точного совмещения отдельн. картинки области
                                 //                  с областью на оригинальном изображении;
                                 //
                                 // y_displacement - смещение в верт. плокости (см. выше),
                                 //
                                 // on_mouse_over  - обработчик события onMouseOver для данной конкретной области
                                 //                  (замещает собой глобальный обработчик),
                                 //
                                 // on_mouse_out   - обработчик события onMouseOut для данной конкретной области
                                 //                  (замещает собой глобальный обработчик),
                                 //
                                 // linked_area_id_1 - значение аттрибута id первой области, связанной (= проявляющейся вместе с)
                                 //                    данной (area_id) областью. После этого параметра может идти значение 2й
                                 //                    связанной области и т.д.
 
Недостаток данного способа - необходимость создания очень детализированных карт изображений, иначе результат будет смотреться грубо и неприятно для глаз. Также не удалось избавиться от параметров x_displacement и y_displacement.

О скрипте написана статья (на английском языке) для сайта Codeproject.com, в скором времени она будет опубликована.


lightmapperv.zip
 Description:
Скрипт Lightmapper/v

Download
 Filename:  lightmapperv.zip
 Filesize:  29.42 KB
 Downloaded:  1084 Time(s)



Last edited by Dmitry Khudorozhkov on Fri Jun 08, 2007 5:01 pm; edited 1 time in total
Back to top
View user's profile Send private message Send e-mail
Dmitry Khudorozhkov
Участник форума



Joined: 20 Feb 2007
Posts: 65
Карма: 7
   поощрить/наказать

Location: Россия, Московская Область, г. Жуковский

PostPosted: Thu Jun 07, 2007 7:33 pm (спустя 7 дней 15 часов 49 минут; написано за 1 минуту 41 секунду)
   Post subject:
Reply with quote

Небольшое обновление: теперь скрипт работает несколько шустрее. Особенно заметно в Firefox.


lightmapperv.zip
 Description:
Обновление от 7.06.2007

Download
 Filename:  lightmapperv.zip
 Filesize:  29.48 KB
 Downloaded:  874 Time(s)

Back to top
View user's profile Send private message Send e-mail
Dmitry Khudorozhkov
Участник форума



Joined: 20 Feb 2007
Posts: 65
Карма: 7
   поощрить/наказать

Location: Россия, Московская Область, г. Жуковский

PostPosted: Fri Jun 08, 2007 3:51 pm (спустя 20 часов 18 минут; написано за 3 минуты 23 секунды)
   Post subject:
Reply with quote

Из скрипта удалены все не участвующие в работе части, несколько ускорена работа в MS IE, а также добавлен компактный (папка "compressed") однофайловый вариант скрипта, который меньше оригинала в 2 раза.


lightmapperv.zip
 Description:
Обновление от 8.06.2007

Download
 Filename:  lightmapperv.zip
 Filesize:  56.55 KB
 Downloaded:  738 Time(s)

Back to top
View user's profile Send private message Send e-mail
Dmitry Khudorozhkov
Участник форума



Joined: 20 Feb 2007
Posts: 65
Карма: 7
   поощрить/наказать

Location: Россия, Московская Область, г. Жуковский

PostPosted: Sat Jun 09, 2007 4:04 pm (спустя 1 день 12 минут; написано за 3 минуты 58 секунд)
   Post subject:
Reply with quote

1) Исправлен баг, из-за которого скрипт не работал в Опере; теперь всё ок.
2) Оверлеи теперь пере-позиционируются после изменения размеров окна.
3) Исправить глюк, указанный phprus, не удалось. Однако баг не наблюдается, если изображение карты абсолютно позиционировано; да и вообще при нормальной вёрстке такой ситуации не должно возникать.


lightmapperv.zip
 Description:
Обновление #2 от 9.06.2007

Download
 Filename:  lightmapperv.zip
 Filesize:  56.48 KB
 Downloaded:  1350 Time(s)

Back to top
View user's profile Send private message Send e-mail
bæv
Модератор «Дзена»



Joined: 27 Aug 2003
Posts: 7275
Карма: 9986
   поощрить/наказать


PostPosted: Tue Nov 18, 2008 7:34 pm (спустя 1 год 5 месяцев 9 дней 3 часа 30 минут)
   Post subject:
Reply with quote


М

Ветка выделена в отдельную тему «Lightmapper/v - интерактивные карты изображений с использованием векторной графики. [Обсуждение]»,
расположенную в форуме Разное :: JavaScript (18 Ноября 2008, 19:34).
Back to top
View user's profile Send private message
Display posts from previous:   
Post new topic   Reply to topic All times are GMT + 3 Hours
Page 1 of 1    Email to a Friend.
You cannot post new topics in this forum. You cannot reply to topics in this forum. You cannot edit your posts in this forum. You cannot delete your posts in this forum. You cannot vote in polls in this forum. You cannot attach files in this forum. You can download files in this forum.
XML