Ищу Работа с интерактивными элементами (карты, схемы и тд)

[LDPS]

Друзья, ищу компонент или может расскажите как сделать при помощи скриптов на обычном html.

Задача:
1) есть карта россии(вообщем это может быть любая схема) jpg. На картике есть визуальные блоки.
2) хочу при наведении на блок, чтобы красиво всплывала информация.

В инете наше только вот это Для просмотра ссылки Войди или Зарегистрируйся
Позволяет делать интерактивную карту... но мне не подходит из-за громоздкости. мне надо просто и лаконично.

 

[gres_18]

Из самых не громоздких вариантов:

<center>
<img src="img/map.jpg" width="132" height="121" border="0" usemap="#russia">
</center>
 
<map name="russia">
 
<area shape="rect" coords="x1,y1,x2,y2" href="1.html" target="_blank" alt="Северо-восточная часть России">
<area shape="rect" coords=" x1,y1,x2,y2" href="2.html" target="_blank" alt="Северо-западная часть России">
<area shape="rect" coords=" x1,y1,x2,y2" href="3.html" target="_blank" alt="Юго-восточная часть России">
<area shape="rect" coords=" x1,y1,x2,y2" href="4.html" target="_blank" alt="Юго-западная часть России">
 
</map>

Правда, это упрощенный пример. Вместо rect, очевидно, придется использовать poly с заданием координат границ визуального блока. Упростить процесс поможет Для просмотра ссылки Войди или Зарегистрируйся.

 

[LDPS]

Это совсем просто вариант, а хотелось бы сделать красиво открывающийся блок куда можно вставить не только одну строку, но и картинку и оформление текста сделать...

 

[puagardian]

Вот несколько скриптов для подобного от CodeCanyon, здесь вылаживали:

Для просмотра скрытого содержимого вы должны войти или зарегистрироваться.

 

[opposite]

LDPS, я подобную задачу решил при помощи Raphaël—JavaScript Library.
Для просмотра ссылки Войди или Зарегистрируйся.
Для решения требуется векторное изображение карты, где визуальные блоки (регионы, например), разделены контурами. Берем карту в формате SVG, Для просмотра ссылки Войди или Зарегистрируйся ее и настраиваем по аналогии с примером под свои нужды.

 

[Al Maz]

Для реализации всплывающих подсказок есть много js-скриптов.

Если блоки прямоугольные, проще использовать просто прозрачные div'ы.

 

[povelitel]

Это можно сделать на javascript но это очень долго, если сам будешь выверять каждый миллиметр области. Я могу посоветовать готовый вариант Для просмотра ссылки Войди или Зарегистрируйся внизу есть исходный код. Дальше сделай так : во всех областях и краях РФ напиши по русски и вместо решеток поставь ссылки и тогда при нажатии на область будет открываться нужная тебе информация пример: <area href="#(Для просмотра ссылки Войди или Зарегистрируйся...)" title="Belgorod Region(Белгородская область)" alt="" shape="poly" coords="38,305,38,310,42,314,46,315,47,318,48,322,48,326,49,328,54,323,55,316,54,312,51,309,47,308,41,304">

 

[WiZXaK]

А как же использование расширений Для просмотра ссылки Войди или Зарегистрируйся