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

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



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

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

PostPosted: Wed May 16, 2007 5:05 am (написано за 4 минуты 6 секунд)
   Post subject: Lightmapper - скрипт для создания интерактивных карт изображений.
Reply with quote

Создающие карту областей тэги MAP и AREA - отличная и удобная вещь. Однако дизайнеру может понадобится не просто создать навигационную карту, но и выделять (highlight) ту или иную область при наведении на неё курсора. Данный скрипт резко упрощает решение такой задачи.

Для установки скрипта нужны:
  1. собственно изображение, к которому будет ассоциирована карта областей;
  2. готовая карта областей (HTML-тэги MAP/AREA), причём каждый тэг области (AREA) должен иметь аттрибут id, а тег MAP должен иметь аттрибуты name и id с идентичными значениями;
  3. набор "вырезанных" из оригинального изображения областей, возможно раскрашенных. Эти изображения будут затем подгружаться и, при наведении курсора на соответствующую область, показываться на странице поверх оригинального изображения.
Имея всё вышеназванное и скачав скрипт, пишем:
Code (html): скопировать код в буфер обмена
<html> (december.com/html/4/element/html.html)
 <head> (december.com/html/4/element/head.html)
  <script (december.com/html/4/element/script.html) type="text/javascript" src="lightmapper.js"> (december.com/html/4/element/.html)</script>
  <script (december.com/html/4/element/script.html) type="text/javascript"> (december.com/html/4/element/.html)

   function mouse_over(id)
   {
     document.getElementById("name").innerHTML = id;
   }

   function mouse_out(id)
   {
     document.getElementById("name").innerHTML = "";
   }

   function prepare()
   {
     new Lightmapper("map_of_europe", "image_of_europe", mouse_over, mouse_out,
                     [ ["Albania",            "images/albania.gif",             1, -2],
                       ["Austria",            "images/austria.gif",            -1, -2],
                       ["Belarus",            "images/belarus.gif",            -2,  3],
                       ["Belgium",            "images/belgium.gif",             1,  3],

     ...

                       ["Russia",             "images/russia.gif",              1, -7, , , "Russia_Kaliningrad"],
                       ["Russia_Kaliningrad", "images/russia_kaliningrad.gif", -2,  1, , , "Russia"],

     ...

                       ["Sweden",             "images/sweden.gif",             -2,  5],
                       ["Ukraine",            "images/ukraine.gif",            -2,  0] ]);
  </script>
 </head>

 <body (december.com/html/4/element/body.html) onload="prepare()"> (december.com/html/4/element/.html)

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

Представленный скрипт инспирирован темой (forum.dklab.ru/viewtopic.php?t=25424) в соседнем разделе форума. Написана статья (на английском языке) для сайта CodeProject.com, будет опубликована в ближайшее время.


lightmapper_src.zip
 Description:
Скрипт LightMapper

Download
 Filename:  lightmapper_src.zip
 Filesize:  38.77 KB
 Downloaded:  2626 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: Thu May 24, 2007 9:29 am (спустя 8 дней 4 часа 23 минуты; написано за 26 секунд)
   Post subject:
Reply with quote

А вот и статья (www.codeproject.com/jscript/Lightmapper.asp).
Back to top
View user's profile Send private message Send e-mail
Dmitry Khudorozhkov
Участник форума



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

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

PostPosted: Tue Jul 31, 2007 1:50 am (спустя 2 месяца 6 дней 16 часов 21 минуту; написано за 2 минуты 40 секунд)
   Post subject:
Reply with quote

Версия 1.1. Из соседнего (forum.dklab.ru/viewtopic.php?t=26001) скрипта портирована возможность создания "дочерних" областей, появляющихся одновременно с родительской областью + несколько мелких багфиксов + скрипт стал меньше.

Статья (ссылка - выше по тексту) будет обновлена в ближайшее время.


lightmapper_src.zip
 Description:
Lightmapper 1.1

Download
 Filename:  lightmapper_src.zip
 Filesize:  48.49 KB
 Downloaded:  1786 Time(s)

Back to top
View user's profile Send private message Send e-mail
Координаты
Guest





Карма: 386
   поощрить/наказать


PostPosted: Tue Aug 28, 2007 9:19 pm (спустя 28 дней 19 часов 28 минут; написано за 24 секунды)
   Post subject: А как?
Reply with quote

Как находить координаты изображений?
Back to top
AKS
Участник форума



Joined: 28 Dec 2005
Posts: 1174
Карма: 102
   поощрить/наказать


PostPosted: Wed Aug 29, 2007 8:40 am (спустя 11 часов 20 минут; написано за 1 минуту 2 секунды)
   Post subject:
Reply with quote

Координаты wrote:
Как находить координаты изображений?
Это зависит от того, где Вы их собираетесь "искать" (да простит меня автор темы за оффтоп). ;)
Back to top
View user's profile Send private message Send e-mail
Dmitry Khudorozhkov
Участник форума



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

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

PostPosted: Tue Sep 04, 2007 3:27 pm (спустя 6 дней 6 часов 47 минут; написано за 1 минуту 24 секунды)
   Post subject:
Reply with quote

Координаты wrote:
Как находить координаты изображений?
В скрипте ищите строки:
Code (JavaScript): скопировать код в буфер обмена
dts.top    = ymin + initY + elem["ydsp"];
dts.left   = xmin + initX + elem["xdsp"];
Это - y и x координаты i-го изображения. Если надо - просто киньте их в массив.
Back to top
View user's profile Send private message Send e-mail
Juliya
Guest





Карма: 386
   поощрить/наказать


PostPosted: Wed Mar 10, 2010 4:09 pm (спустя 2 года 6 месяцев 6 дней 41 минуту; написано за 24 секунды)
   Post subject:
Reply with quote

Quote:
new Lightmapper("map_of_europe", "image_of_europe", mouse_over, mouse_out,
                     [ ["Albania", "images/albania.gif", 1, -2],
                       ["Austria", "images/austria.gif", -1, -2],
                       ["Belarus", "images/belarus.gif", -2, 3],
                       ["Belgium", "images/belgium.gif", 1, 3],
Что значат последние 2 цифры?
Back to top
dimagolov
Участник форума



Joined: 04 Feb 2007
Posts: 1664
Карма: 96
   поощрить/наказать

Location: Christ Church, Barbados

PostPosted: Wed Mar 10, 2010 4:18 pm (спустя 9 минут; написано за 39 секунд)
   Post subject:
Reply with quote

Juliya wrote:
Что значат последние 2 цифры?
Juliya, читайте в первом посте "Параметры конструктора объекта Lightmapper:"
Back to top
View user's profile Send private message
ganeevez
Заглянувший



Joined: 19 May 2016
Posts: 1
Карма: 0
   поощрить/наказать


PostPosted: Thu May 19, 2016 9:51 am (спустя 6 лет 2 месяца 8 дней 17 часов 33 минуты; написано за 5 минут 49 секунд)
   Post subject: Re: Lightmapper - скрипт для создания интерактивных карт изображений.
Reply with quote

Dmitry Khudorozhkov wrote:
Создающие карту областей тэги MAP и AREA - отличная и удобная вещь. Однако дизайнеру может понадобится не просто создать навигационную карту, но и выделять (highlight) ту или иную область при наведении на неё курсора.
Хочу под картой сделать ссылки на страны,
Подскажите как можно реализовать,чтобы при наведении мышкой на ссылку, на карте подсвечивалась страна (хоть прямоугольником) ?
Back to top
View user's profile Send private message
jinjo
Заглянувший



Joined: 10 Oct 2016
Posts: 1
Карма: 0
   поощрить/наказать

Location: Новороссийск

PostPosted: Mon Oct 10, 2016 8:57 pm (спустя 4 месяца 22 дня 11 часов 5 минут; написано за 48 секунд)
   Post subject:
Reply with quote

ganeevez Решение не нашли? Кто подскажет как можно реализовать?
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