Подсветка региона карты при наведении на название региона в списке

@greenice · Регистрация: 02.06.2013

Author24 — интернет-сервис помощи студентам

Всем привет, делаю интерактивную карту. Нарезал карту России на регионы с помощью shape="poly" coords="36.........., теперь задача, что-бы при наведении на название региона из общего списка нужный регион подсвечивался.
Как можно реализовать подобную возможность?
Вот на картинке, что есть в настоящий момент. http://msk-atlant.ru/test/111.png
Буду благодарен советам.

@newJS · 02.06.2013, 06:00

Если это самопал, то
сделай много прозрачных гифок с нужными контурами, может спрайт получится
при наезде на некую область карты накладывай соответствующую ей гифку, остальные прячь

как то так

Vovan-VE · 02.06.2013, 07:12

Сообщение от greenice

Нарезал карту России на регионы с помощью shape="poly" coords="36.........., теперь задача, что-бы при наведении на название региона из общего списка нужный регион подсвечивался.
Как можно реализовать подобную возможность?

У элементов <area> ловите события mouseover и mouseout.

@greenice · 02.06.2013, 13:50 **[ТС]**

Сообщение от Vovan-VE

У элементов <area> ловите события mouseover и mouseout.

А можно чуть подробней, как будет выглядеть конструкция?

@greenice · 04.06.2013, 02:46 **[ТС]**

Сообщение от Vovan-VE

У элементов <area> ловите события mouseover и mouseout.

Можно хоть наводку, как строить конструкцию)

@dolte · 04.06.2013, 12:10

http://html.manual.ru/book/html/navmaps/area.php

@newJS · 04.06.2013, 21:29

Сообщение от Vovan-VE

У элементов <area> ловите события mouseover и mouseout.

Vovan-VE, я поймал, держать долго?, вырывается однако....
Народ ждёт решения, волнуется, нервничает....

@greenice · 04.06.2013, 22:29 **[ТС]**

Всем спасибо за помощь, решил проблему проще, конечно с загрузкой кеша, но работает.
1) Рядом с картой кинул картинку 1*1 px белую. <div style="position: absolute; margin-top:-485px;"><img id="pic" src="images/01.jpg"></div>
2) Затем подписал регионы, сделал ссылки <a href="/primer.html" onmouseover="document.getElementById('pic').src='map/center.png'" onmouseout="document.getElementById('pic').src='images/01.jpg'">Центральный регион</a><br>

Т.е. здесь при наведении моя маленькая картинка заменяется большой картой, на которой уже отмечен регион, затем когда отвожу мышку, снова появляется маленькая картиночка, и основная карта. А когда вожу конкретно по карте, то уже работает area. )

@Forastero · 05.06.2013, 15:52

Можно сделать немного симпатичнее это.
Скажем, на JQuery:

Javascript

1	$('area01').hover(function(){$('#map_img').attr('src', '../img/map/region01.png')}, function(){$('#map_img').attr('src', '../img/map/default.png')});

Что в этом духе. Т.е. при наведении на area01 атрибут src заменяется у изображения.

@greenice 0 / 0 / 0 Регистрация: 02.06.2013 Сообщений: 4
		1
	Подсветка региона карты при наведении на название региона в списке 02.06.2013, 04:48. Показов 7679. Ответов 8 Метки нет (Все метки) Всем привет, делаю интерактивную карту. Нарезал карту России на регионы с помощью shape="poly" coords="36.........., теперь задача, что-бы при наведении на название региона из общего списка нужный регион подсвечивался. Как можно реализовать подобную возможность? Вот на картинке, что есть в настоящий момент. http://msk-atlant.ru/test/111.png Буду благодарен советам. Миниатюры 0

@newJS 2435 / 1114 / 312 Регистрация: 23.06.2011 Сообщений: 3,525
	02.06.2013, 06:00	2
	Если это самопал, то сделай много прозрачных гифок с нужными контурами, может спрайт получится при наезде на некую область карты накладывай соответствующую ей гифку, остальные прячь как то так 0

Vovan-VE 13208 / 6596 / 1041 Регистрация: 10.01.2008 Сообщений: 15,069
	02.06.2013, 07:12	3
	Сообщение от greenice Нарезал карту России на регионы с помощью shape="poly" coords="36.........., теперь задача, что-бы при наведении на название региона из общего списка нужный регион подсвечивался. Как можно реализовать подобную возможность? У элементов <area> ловите события mouseover и mouseout. 1

@greenice 0 / 0 / 0 Регистрация: 02.06.2013 Сообщений: 4
	02.06.2013, 13:50 [ТС]	4
	Сообщение от Vovan-VE У элементов <area> ловите события mouseover и mouseout. А можно чуть подробней, как будет выглядеть конструкция? 0

@greenice 0 / 0 / 0 Регистрация: 02.06.2013 Сообщений: 4
	04.06.2013, 02:46 [ТС]	5
	Сообщение от Vovan-VE У элементов <area> ловите события mouseover и mouseout. Можно хоть наводку, как строить конструкцию) 0

@dolte Человек 330 / 204 / 63 Регистрация: 04.02.2013 Сообщений: 1,220
	04.06.2013, 12:10	6
	http://html.manual.ru/book/html/navmaps/area.php 0

@newJS 2435 / 1114 / 312 Регистрация: 23.06.2011 Сообщений: 3,525
	04.06.2013, 21:29	7
	Сообщение от Vovan-VE У элементов <area> ловите события mouseover и mouseout. Vovan-VE, я поймал, держать долго?, вырывается однако.... Народ ждёт решения, волнуется, нервничает.... 0

@greenice 0 / 0 / 0 Регистрация: 02.06.2013 Сообщений: 4
	04.06.2013, 22:29 [ТС]	8
	Всем спасибо за помощь, решил проблему проще, конечно с загрузкой кеша, но работает. 1) Рядом с картой кинул картинку 1*1 px белую. <div style="position: absolute; margin-top:-485px;"><img id="pic" src="images/01.jpg"></div> 2) Затем подписал регионы, сделал ссылки <a href="/primer.html" onmouseover="document.getElementById('pic').src='map/center.png'" onmouseout="document.getElementById('pic').src='images/01.jpg'">Центральный регион</a><br> Т.е. здесь при наведении моя маленькая картинка заменяется большой картой, на которой уже отмечен регион, затем когда отвожу мышку, снова появляется маленькая картиночка, и основная карта. А когда вожу конкретно по карте, то уже работает area. ) 0

	05.06.2013, 15:52