Форум программистов, компьютерный форум, киберфорум
HTML, CSS
Войти
Регистрация
Восстановить пароль
Блоги Сообщество Поиск Заказать работу  
 
Рейтинг 4.67/6: Рейтинг темы: голосов - 6, средняя оценка - 4.67
0 / 0 / 0
Регистрация: 11.04.2014
Сообщений: 20

Как реализовать карту

15.07.2015, 17:49. Показов 1222. Ответов 2
Метки нет (Все метки)

Студворк — интернет-сервис помощи студентам
Народ подскажите, как реализовать:

Есть карта с выделенными объектами, при наведении они выделяются, часть кода ниже. Но мне надо чтобы эти объекты выделялись при наведении на отдельные ссылки, к примеру:
Наводим на ссылку ниже
<a href="/">Париж <a>
а на карте выделяется область с определенными координатами.

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<img src="images/02.png" alt="карта" class="map" usemap="#Map" border="0" style="position:absolute;left:0; top:0px; width:800px; height:743px; opacity:0" width="800" height="743"/>
                    </div>
                    <map name="Map" id="Map" class="map">
<area shape="poly" coords="480,536,493,542,515,542,523,534,536,534,541,543,550,543,554,550,561,548,584,564,592,554,599,556,622,531,624,514,631,514,631,504,636,499,636,473,623,473,610,453,604,457,598,447,590,453,584,447,590,436,577,436,575,423,572,416,570,408,577,408,577,398,572,398,561,387,554,392,539,382,514,382,499,387,505,395,503,416,513,425,500,436,514,452,514,460,508,460,496,452,479,465,467,463,467,467,477,480,478,490,462,501,467,518,451,521,442,525,434,528,434,533,452,548,464,543,475,543,480,536" onmouseover="over('<b>Описание участка</b> Поддерживает HTML-теги<br />')" onmousemove="move(event)" onmouseout="out()"
 href="#" />
<area shape="poly" coords="355,682,349,669,359,661,365,661,369,645,387,645,397,638,409,638,417,644,417,630,423,612,422,601,417,601,417,587,416,578,429,564,422,554,409,550,406,545,393,535,382,542,375,549,342,549,334,564,327,564,320,554,317,564,320,582,281,625,287,638,291,638,299,640,303,644,317,661,328,673,339,686,355,686" onmouseover="over('<b>Описание участка</b> Поддерживает HTML-теги<br />')" onmousemove="move(event)" onmouseout="out()" href="#" />
<area shape="poly" coords="445,542,439,563,429,564,422,554,409,550,406,545,394,536,382,543,370,534,370,527,361,511,370,467,359,467,356,453,375,438,387,438,381,425,361,433,361,413,342,413,334,402,346,382,346,364,387,372,434,343,454,332,464,336,476,327,480,336,476,349,513,373,514,382,499,384,508,395,505,416,513,425,503,436,514,452,514,460,508,460,499,452,479,463,467,463,479,482,476,491,462,499,468,519,451,521,443,524,433,527,445,543" onmouseover="over('<b>Описание участка</b> Поддерживает HTML-теги<br />')" onmousemove="move(event)" onmouseout="out()" href="#" />
<area shape="poly" coords="434,343,431,334,429,322,459,291,445,266,452,253,464,252,462,226,446,220,431,232,387,200,375,203,361,211,361,226,356,235,346,220,329,235,309,235,289,220,272,220,266,217,250,217,246,229,253,239,270,238,303,274,303,291,319,290,320,296,319,307,332,319,332,322,339,332,327,332,339,347,339,351,346,365,387,371,434,343" onmouseover="over('<b>Описание участка</b> Поддерживает HTML-теги<br />')" onmousemove="move(event)" onmouseout="out()" href="#" />
<area shape="poly" coords="311,31,346,31,355,44,355,54,365,66,359,67,365,75,365,84,378,113,382,103,401,106,406,97,416,108,423,103,423,113,432,113,432,121,423,125,422,133,416,142,406,157,401,169,403,176,387,200,378,202,361,211,361,226,356,232,346,221,329,235,309,234,289,220,272,220,266,216,246,216,237,207,227,207,227,195,241,185,235,174,235,170,227,162,222,162,223,151,214,141,241,125,246,129,258,120,272,120,272,103,265,91,265,79,270,75,264,66,264,51,283,40,299,40,304,47,311,31" onmouseover="over('<b>Описание участка</b> Поддерживает HTML-теги<br />')" onmousemove="move(event)" onmouseout="out()" href="#" />
<area shape="poly" coords="381,543,375,549,342,549,334,564,323,563,320,556,317,564,320,582,281,626,266,626,264,612,266,606,246,606,241,590,253,578,253,554,240,539,241,521,250,515,250,509,259,503,253,483,259,467,250,460,250,450,265,462,272,462,281,467,283,460,285,452,281,447,287,438,281,426,314,416,303,394,304,382,320,365,322,352,335,351,346,364,346,384,334,402,343,413,361,413,361,433,381,426,387,438,375,438,359,457,359,467,370,467,361,509,375,527,370,533,382,543" onmouseover="over('<b>Описание участка</b> Поддерживает HTML-теги<br />')" onmousemove="move(event)" onmouseout="out()" href="#" />
<area shape="poly" coords="76,509,76,503,92,499,113,503,118,476,131,467,141,477,164,473,166,477,160,495,183,504,194,514,205,514,211,511,223,509,226,501,235,511,235,515,241,521,239,539,253,554,253,579,243,590,223,602,211,594,194,611,182,601,176,587,145,568,135,578,135,590,124,590,112,583,112,556,107,548,104,560,94,560,92,545,98,545,96,539,85,539,76,530,76,511" onmouseover="over('<b>Описание участка</b> Поддерживает HTML-теги<br />')" onmousemove="move(event)" onmouseout="out()" href="#" />
<area shape="poly" coords="423,102,440,103,451,89,464,91,480,103,481,115,514,115,515,106,534,120,530,133,514,133,513,151,515,157,513,170,515,185,494,209,481,200,480,210,496,232,480,252,462,247,464,226,447,218,429,232,387,200,403,176,401,164,409,151,422,133,422,125,432,121,432,113,423,113,423,103" onmouseover="over('<b>Описание участка</b> Поддерживает HTML-теги<br />')" onmousemove="move(event)" onmouseout="out()" href="#" />
<area shape="poly" coords="132,466,136,453,153,453,153,439,153,435,155,433,132,434,121,427,121,417,143,403,143,381,125,379,124,389,113,389,108,377,105,377,95,372,105,365,95,352,105,334,109,334,109,327,95,321,85,306,69,306,63,296,57,296,57,306,39,306,39,312,42,312,43,319,39,321,44,323,35,323,35,333,58,348,58,377,36,385,35,399,30,409,41,419,35,427,28,424,27,430,20,427,20,437,28,437,28,447,35,440,35,453,49,458,46,462,36,463,33,474,50,484,58,486,65,487,65,498,51,504,69,515,74,515,77,505,93,500,113,504,118,478,131,469" onmouseover="over('<b>Описание участка</b> Поддерживает HTML-теги<br />')" onmousemove="move(event)" onmouseout="out()" href="#" />
<area shape="poly" coords="44,304,48,292,42,286,56,260,68,245,112,245,123,256,132,258,137,272,147,258,160,266,160,275,166,290,180,286,180,274,189,274,194,270,201,253,205,258,218,258,218,274,210,281,218,296,224,307,224,319,214,326,214,349,223,349,229,364,237,364,237,371,237,382,201,382,187,391,174,411,141,402,142,380,124,378,123,388,112,387,107,376,104,376,94,372,104,365,94,351,104,333,107,333,108,326,98,322,84,304,68,305,62,295,56,295,56,305,44,305" onmouseover="over('<b>Описание участка</b> Поддерживает HTML-теги<br />')" onmousemove="move(event)" onmouseout="out()" href="#" />
<area shape="poly" coords="523,711,458,692,457,677,462,674,459,669,459,661,445,644,439,651,426,640,417,645,417,626,423,612,423,601,417,601,417,583,416,578,429,564,439,564,445,543,452,548,464,542,476,543,481,536,493,542,515,542,522,534,538,536,541,543,544,543,554,550,561,545,584,563,596,554,602,554,590,578,590,595,610,623,604,639,610,640,619,644,613,656,619,664,619,681,610,681,604,689,593,698,577,689,571,693,561,689,549,712,537,712,530,705,523,715" onmouseover="over('<b>Описание участка</b> Поддерживает HTML-теги<br />')" onmousemove="move(event)" onmouseout="out()" href="#" />
<area shape="poly" coords="83,587,72,578,63,585,49,587,44,594,35,595,34,607,26,607,24,612,27,614,22,635,22,655,14,656,15,677,32,690,34,702,43,716,43,723,94,723,108,715,122,711,129,713,131,712,142,712,161,687,137,686,120,682,108,681,112,667,112,648,98,640,105,632,94,623,100,614,90,612,77,606,80,586" onmouseover="over('<b>Описание участка</b> Поддерживает HTML-теги<br />')" onmousemove="move(event)" onmouseout="out()" href="#" />
<area shape="poly" coords="81,585,91,579,91,573,83,565,93,560,99,560,106,548,111,555,111,583,123,590,131,590,131,578,145,569,176,587,181,601,193,607,210,595,222,602,240,590,242,606,265,606,263,612,265,626,282,626,286,638,290,638,302,643,286,644,274,656,280,661,277,666,265,665,261,659,258,640,249,644,249,656,236,669,228,658,217,658,203,673,193,676,181,679,179,688,131,686,119,686,106,681,111,667,111,645,97,643,104,631,93,625,99,612,89,612,75,606,80,588" onmouseover="over('<b>Описание участка</b> Поддерживает HTML-теги<br />')" onmousemove="move(event)" onmouseout="out()" href="#" />
<area shape="poly" coords="301,388,270,373,268,364,263,364,262,358,251,366,239,371,235,382,192,384,185,392,172,406,140,402,118,416,118,425,130,433,152,436,152,438,150,438,150,452,133,452,130,467,135,477,158,473,164,483,158,497,181,504,192,514,203,514,209,511,221,511,222,503,227,504,233,511,233,515,240,520,248,515,248,509,257,501,252,483,257,467,248,460,250,450,263,462,270,462,279,468,282,457,284,451,279,447,285,438,281,426,313,417,306,406,301,388" onmouseover="over('<b>Описание участка</b> Поддерживает HTML-теги<br />')" onmousemove="move(event)" onmouseout="out()" href="#" />
<area shape="poly" coords="218,274,210,281,214,296,226,307,225,316,214,326,211,349,223,349,229,364,239,359,237,371,253,366,264,358,266,365,271,373,304,388,304,382,320,365,323,352,339,351,339,347,327,332,339,332,332,322,332,315,320,305,323,296,319,291,303,291,304,275,270,238,253,239,246,229,237,240,237,245,243,248,238,255,230,255,230,260,224,258,227,274,222,274" onmouseover="over('<b>Описание участка</b> Поддерживает HTML-теги<br />')" onmousemove="move(event)" onmouseout="out()" href="#" />
<area shape="poly" coords="551,235,551,244,560,244,575,277,584,277,589,286,596,275,604,281,604,290,596,291,596,304,590,305,590,310,602,319,602,351,596,355,599,364,599,371,592,365,585,364,592,371,584,376,577,372,570,372,570,380,560,387,554,388,541,382,515,382,513,372,476,349,481,336,476,326,465,336,454,332,434,343,432,336,429,322,457,291,445,266,454,252,465,248,479,252,499,232,513,235,554,235" onmouseover="over('<b>Описание участка</b> Поддерживает HTML-теги<br />')" onmousemove="move(event)" onmouseout="out()" href="#" />
<area shape="poly" coords="750,556,771,573,769,583,777,589,771,598,758,583,758,596,750,594,743,600,747,607,737,626,736,638,747,638,747,644,744,648,747,651,743,661,737,661,724,676,717,704,705,698,696,698,696,702,687,705,674,693,663,703,648,686,636,691,623,691,619,681,619,667,610,656,619,644,610,639,604,639,610,623,590,595,590,579,602,554,622,532,623,515,632,514,632,504,636,499,636,483,642,483,649,489,665,489,667,499,659,499,654,509,660,518,673,518,673,528,677,530,690,525,708,530,708,539,724,539,719,560,727,567,736,565,736,560,749,556" onmouseover="over('<b>Описание участка</b> Поддерживает HTML-теги<br />')" onmousemove="move(event)" onmouseout="out()" href="#" />
<area shape="poly" coords="607,277,607,272,599,260,614,246,614,217,610,200,604,178,596,176,596,170,604,155,610,142,614,142,614,118,610,118,610,106,590,106,589,102,572,102,572,84,554,89,556,79,561,75,557,61,544,51,544,40,539,40,541,31,526,31,526,38,522,38,521,27,513,27,486,46,479,46,479,51,473,51,473,89,464,91,480,102,486,115,513,115,515,108,536,120,530,133,514,133,514,151,521,158,513,171,515,185,494,209,481,202,480,210,496,232,510,235,554,238,551,244,577,277,584,277,589,286,596,277,604,277" onmouseover="over('<b>Описание участка</b> Поддерживает HTML-теги<br />')" onmousemove="move(event)" onmouseout="out()" href="#" />
</map>
Добавлено через 6 часов 29 минут
Не ужели это так сложно? или просто помочь никто не хочет?
0
IT_Exp
Эксперт
34794 / 4073 / 2104
Регистрация: 17.06.2006
Сообщений: 32,602
Блог
15.07.2015, 17:49
Ответы с готовыми решениями:

Как реализовать интерактивную карту
Добрый день! Как можно реализовать интерактивную карту с использованием html 5 и готовой векторной карты (SVG) так, чтобы при...

Как реализовать карту сайта?
Собственно вопрос: как реализовать &quot;карту сайта&quot; или &quot;навигацию&quot; по примеру как на скриншоте: Буду благодарен за...

Реализовать карту Украины и разбить ее на регионы
Доброго времени суток! Есть сайт где необходимо реализовать карту Украины и разбить ее на регионы.Так чтоб при наведении на область цвет...

2
 Аватар для RFusOlaXn
10 / 10 / 5
Регистрация: 21.06.2015
Сообщений: 32
15.07.2015, 20:00
Скинь все файлы, помочь будет легче.
0
0 / 0 / 0
Регистрация: 11.04.2014
Сообщений: 20
15.07.2015, 20:53  [ТС]
там еще js и картинка, пример как на авито.ру на главной странице, вот мне надо практически как у них
0
Надоела реклама? Зарегистрируйтесь и она исчезнет полностью.
BasicMan
Эксперт
29316 / 5623 / 2384
Регистрация: 17.02.2009
Сообщений: 30,364
Блог
15.07.2015, 20:53
Помогаю со студенческими работами здесь

Как правильно реализовать огромную безшовную 2D карту?
Здравствуйте, сразу извеняюсь,что возможно создал тему не в том разделе форума. Начал вот создание онлайновой 2Д игрушки (на Unity) типа...

Реализовать карту
Нужно добавить border на объект Все что получилось у меня (на карте сверху) в мозилле не работает. Вот так вот.. Добавлено...

Реализовать карту для игры
Хочу написать игру....... простую..... интересует вопрос как создать мапу...... и ее прорисовать ??? также как организировать смену...

C помощью чего можно реализовать оффлайн карту?
Господа, подскажите, пожалуйста, с помощью чего реализовать оффлайн карту, с возможностью ставить на неё метки и маршруты?

С помощью чего лучше реализовать программу базу данных и топографическую карту?
Доброго дня грамотные люди! Нужна помощь в решении ряда задач! Хочу сделать базу данных при возникновении чрезвычайных ситуаций разного...


Искать еще темы с ответами

Или воспользуйтесь поиском по форуму:
3
Ответ Создать тему
Новые блоги и статьи
SDL3 для Web (WebAssembly): Обработчик клика мыши в браузере ПК и касания экрана в браузере на мобильном устройстве
8Observer8 02.02.2026
Содержание блога Для начала пошагово создадим рабочий пример для подготовки к экспериментам в браузере ПК и в браузере мобильного устройства. Потом напишем обработчик клика мыши и обработчик. . .
Философия технологии
iceja 01.02.2026
На мой взгляд у человека в технических проектах остается роль генерального директора. Все остальное нейронки делают уже лучше человека. Они не могут нести предпринимательские риски, не могут. . .
SDL3 для Web (WebAssembly): Вывод текста со шрифтом TTF с помощью SDL3_ttf
8Observer8 01.02.2026
Содержание блога В этой пошаговой инструкции создадим с нуля веб-приложение, которое выводит текст в окне браузера. Запустим на Android на локальном сервере. Загрузим Release на бесплатный. . .
SDL3 для Web (WebAssembly): Сборка C/C++ проекта из консоли
8Observer8 30.01.2026
Содержание блога Если вы откроете примеры для начинающих на официальном репозитории SDL3 в папке: examples, то вы увидите, что все примеры используют следующие четыре обязательные функции, а. . .
SDL3 для Web (WebAssembly): Установка Emscripten SDK (emsdk) и CMake для сборки C и C++ приложений в Wasm
8Observer8 30.01.2026
Содержание блога Для того чтобы скачать Emscripten SDK (emsdk) необходимо сначало скачать и уставить Git: Install for Windows. Следуйте стандартной процедуре установки Git через установщик. . . .
SDL3 для Android: Подключение Box2D v3, физика и отрисовка коллайдеров
8Observer8 29.01.2026
Содержание блога Box2D - это библиотека для 2D физики для анимаций и игр. С её помощью можно определять были ли коллизии между конкретными объектами. Версия v3 была полностью переписана на Си, в. . .
Инструменты COM: Сохранение данный из VARIANT в файл и загрузка из файла в VARIANT
bedvit 28.01.2026
Сохранение базовых типов COM и массивов (одномерных или двухмерных) любой вложенности (деревья) в файл, с возможностью выбора алгоритмов сжатия и шифрования. Часть библиотеки BedvitCOM Использованы. . .
SDL3 для Android: Загрузка PNG с альфа-каналом с помощью SDL_LoadPNG (без SDL3_image)
8Observer8 28.01.2026
Содержание блога SDL3 имеет собственные средства для загрузки и отображения PNG-файлов с альфа-каналом и базовой работы с ними. В этой инструкции используется функция SDL_LoadPNG(), которая. . .
КиберФорум - форум программистов, компьютерный форум, программирование
Powered by vBulletin
Copyright ©2000 - 2026, CyberForum.ru