Javascript-форум (https://javascript.ru/forum/)
-   Элементы интерфейса (https://javascript.ru/forum/dom-window/)
-   -   Динамическая карта страны (https://javascript.ru/forum/dom-window/34182-dinamicheskaya-karta-strany.html)

McLotos 23.12.2012 14:47

Динамическая карта страны
 
Добрый день, подскажите, как можно сделать такой прикол, есть карта страны, нужно чтобы при наведении на какой-то регион этот регион подсвечивался, увеличивался и показывал некоторую информацию.
Я сейчас сделал так:
Разрезал карту по регионам на разные файлы, теперь вот пытаюсь расставить все картинки так, чтобы они совпадали по границам, а дальше нужно будет навешивать на каждую картинку событие. Может есть варианты по проще?

ams 24.12.2012 19:50

Попробуй http://htmlbook.ru/html/area

Deff 24.12.2012 21:06

Суть изготовления карт со всплывающими областями такая:

1. Изготовляется картинка стандартного вида карты.

2. Поверх неё вешаем position:absolute прозрачку, которая и будет истинной мап, картой,с привязанной к ней area( картинка карты п.п.1 будет видна сквозь нее. z-index данной прозрачки (10000 - к примеру)

3. Делаем у area спецфискую span обертку с единым классом, которая и даст возможность кликабельной событийности,
(посколь к area клик или иные события(не считая перехода по ссылкам) не привязываются)
<span class="Myclick" ><area shape="poly" coords="113,24,211,24,233,0,137,0" href="inform.html" alt="Информация"></span>

4.Создаем на прозрачках картинки всплывающих областей(выделена/окрашена только всплывающая область, общий размер данной картинки вместе с прозрачкой окружающей выделенную область - размером в исходную карту )
Начальный z-index у данных картинок областей отрицательный. Картинки по событию клика(наведения) привязываем к соответствующим span.Myclick и они, по событию, меняют z-index с отрицательного, на положительный.

Картинки областей складываем стопкой с position:absolute перед самой первой дефолтной картинкой, что в п.п.1


Часовой пояс GMT +3, время: 00:33.