Показать элементы при наведении на area

@Vladislav306907 · Регистрация: 03.09.2015

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

Доброго времени суток. У меня имеется интерактивная карта (http://rost.malibu-test.mcdir.ru/ - в середине страницы). При наведении на различные федеральные округи, они подсвечиваются. Необходимо сделать, чтобы при наведении они не только подсвечивались, но на них так же появлялись метки городов (Центральный ФО - сделан не правильно, но что в итоге я хотел получить, понять можно, название города ссылкой сделано.) Приведу пример куска карты:

HTML5
1
2
3
4
<area shape="poly" alt="" id="u4h" coords="116,333,122,327,123,319,129,326,132,329,136,323,131,316,137,317,135,309,139,303,143,302,147,297,154,296,158,290,156,284,163,288,176,291,178,294,186,290,190,294,193,295,198,296,199,297,202,298,208,299,208,304,214,306,216,309,220,307,221,314,225,319,231,317,236,318,240,315,242,321,250,327,257,333,269,332,267,340,264,344,257,343,254,347,247,345,246,342,241,341,240,345,227,344,229,348,225,351,223,346,218,349,216,352,209,354,202,356,203,362,205,363,198,371,190,375,191,389,180,395,176,402,172,397,160,397,156,406,152,407,144,403,137,392,133,387,132,388,135,383,129,379,127,378,127,375,123,373,127,366,128,360,128,360,124,356,127,351,127,353,132,350,132,344,128,339,123,338,121,334,118,334">
            <div class="ar_map_1"><img class="lab_1" src="<?php bloginfo("template_directory"); ?>/images/lab.png" alt=""><a class="lab_11" href="#">Иваново</a></div>
<area shape="poly" alt="" id="u6h" coords="94,255,84,240,88,239,95,241,100,249,96,253">
<div class="ar_map_2"><img class="lab_2" src="<?php bloginfo("template_directory"); ?>/images/lab.png" alt=""><a class="lab_22" href="#">Москва</a></div>

И сам скрипт

JavaScript
1
2
3
4
5
6
7
8
9
$(document).ready(function() {
  $("area#u4h").mouseover(function(){
        $('.lab_1, .lab_11').show();
   });
   
    $("area#u4h").mouseout(function(){
        $('.lab_1, .lab_11').hide();
   });
});

Скрипт срабатывает на один кусок карты, делал для тестирования, но если навожу курсор на метку или название города - элементы пропадают, т. к. курсор уже не на area, это первая проблема и вторая проблема - не хотелось бы писать для каждого отдельного кусочка карты по скрипту, а как это сделать в цикле, не могу понять, да и названия классов надо как то упорядочить, насколько я понимаю. Подскажите кто чем может плиз

@Almag13 · 18.10.2015, 16:25

1. у вас картинки на всем сайте не сделаны спрайтом...
Из-за этого у вас появляются скачки при наведении... Нужен как минимум спрайт ховера и обычной картинки...

2. По вашему коду интерактивной карты...
Можно объединить... скажем запихать все это в function... код будет таким

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
function mapManipulate (mapID, showEl){
mapID.mouseenter(function(){
        showEl.show();
   });
 
mapID.mouseleave(function(){
showEl.hide();
});
}
 
/*Запускаем нашу функцию*/
 
mapManipulate ($('area#u4h'),$('.lab_1, .lab_11'));
mapManipulate ($('area#u3h'),$('.lab_3, .lab_13'));

PS. Можем найти необходимые пункты через $(this); если бы они были вложены было бы проще... А так нужно узнать индекс скажем или число и по нему выводить...

@Vladislav306907 · 18.10.2015, 17:43 **[ТС]**

Almag13, Спрайтом я буду переделывать только одно место, там заметны скачки, согласен.
А по поводу кода, запихнул, не срабатывает он, либо я что то не понимаю

Добавлено через 18 минут

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
        <script>
function mapManipulate (mapID, showEl){
mapID.mouseenter(function(){
        showEl.show();
   });
 
mapID.mouseleave(function(){
showEl.hide();
});
}
 
/*Запускаем нашу функцию*/
 
mapManipulate ($('area#u4h'),$('.lab_1, .lab_11'));
mapManipulate ($('area#u3h'),$('.lab_2, .lab_22'));
</script>

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
    <area shape="poly" alt="" id="u3h" coords="83,427,87,432,94,431,94,428,102,430,105,427,101,422,104,420,112,424,119,424,115,419,109,416,113,412,119,416,126,420,128,422,133,416,133,412,138,411,145,407,145,404,150,408,158,407,163,399,171,398,175,404,177,408,183,410,190,416,189,421,185,422,192,424,195,429,200,434,191,437,186,442,186,447,181,449,177,451,179,455,181,457,177,462,179,466,185,469,184,482,182,479,180,480,181,485,173,487,169,487,164,485,162,487,159,491,158,493,150,478,143,466,137,458,132,451,121,444,112,442,110,455,109,466,100,460,97,463,96,467,94,468,92,465,90,463,87,447,84,443,86,441,82,434">
<div class="ar_map_2"><img class="lab_2" src="<?php bloginfo("template_directory"); ?>/images/lab.png" alt=""><a class="lab_22 fancybox-inline" href="#form_8">Иваново</a></div>
 
<div style="display:none" class="fancybox-hidden">
                        
                        <div id="form_8">
                        <p class="zaga">Южный ФО</p><hr>
<p class="in_tx" >"Название филиала"</p>
<p class="in_tx" >Адрес офиса г. Санкт-Петербург: 199106, Гражданский просп., 77 корпус 4, Санкт-Петербург</p>
<p class="in_tx" >Телефон: 8 800 250-38-40, 8 (4932) 26-28-11</p>
<p class="in_tx" >Факс: (4932) 26-28-11</p>
<p class="in_tx" >E-mail: admin@testex.ru</p>
<p class="in_tx" >Режим работы: с 8 до 18, вых. сб. и вскр.</p>                     
                        </div>
                            
                     </div>
 
            <area shape="poly" alt="" id="u4h" coords="116,333,122,327,123,319,129,326,132,329,136,323,131,316,137,317,135,309,139,303,143,302,147,297,154,296,158,290,156,284,163,288,176,291,178,294,186,290,190,294,193,295,198,296,199,297,202,298,208,299,208,304,214,306,216,309,220,307,221,314,225,319,231,317,236,318,240,315,242,321,250,327,257,333,269,332,267,340,264,344,257,343,254,347,247,345,246,342,241,341,240,345,227,344,229,348,225,351,223,346,218,349,216,352,209,354,202,356,203,362,205,363,198,371,190,375,191,389,180,395,176,402,172,397,160,397,156,406,152,407,144,403,137,392,133,387,132,388,135,383,129,379,127,378,127,375,123,373,127,366,128,360,128,360,124,356,127,351,127,353,132,350,132,344,128,339,123,338,121,334,118,334">
            <div class="ar_map_1"><img class="lab_1" src="<?php bloginfo("template_directory"); ?>/images/lab.png" alt=""><a class="lab_11" href="#">Иваново</a></div>

@Almag13 · 18.10.2015, 17:55

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

Еще нужно проверить срабатывает ли скрипт mouseenter при наведении, например console.log('сработал');

Добавлено через 12 минут
Слегка доработал код...
Console.log() работает проверил...

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
        <script>
function mapManipulate (mapID, showEl,showEl1){
mapID.mouseenter(function(){
        showEl.show();
showEl1.show();
   });
 
mapID.mouseleave(function(){
showEl.hide();
showEl1.hide();
});
}
 
/*Запускаем нашу функцию*/
 
mapManipulate ($('area#u4h'),$('.lab_1'),$('.lab_11'));
mapManipulate ($('area#u3h'),$('.lab_2'), $('.lab_22'));
</script>

И еще функция срабатывает как mousleave когда мы наводим на эти картинки...

@Vladislav306907 · 19.10.2015, 01:46 **[ТС]**

В общем не работал ваш код нормально, вот написал:

JavaScript
1
2
3
4
$(document).ready(function() { 
 $("area").mouseover(function(){ var that = $(this); that.next().find('a, img').fadeIn('slow');
   that.siblings("area").next().find('a, img').fadeOut(); }); 
});

@Almag13 · 19.10.2015, 12:28

Чтобы не пропадал ховер при наведении на иконки, было бы замечательно если бы было вложение этих элементов в area...

Код ваш в принципе... только слегка доработанный...

@Vladislav306907 · 19.10.2015, 17:09 **[ТС]**

Пробовал вкладывать в area все это дело, не прокатило...
думаю плагин один попробовать

@Almag13 · 19.10.2015, 18:27

Есть вариант, вкладывать в див area и принадлежащие к нему точку с заголовком...
И mousenter воспроизводить на этот div а не на area, тогда такого бага не будет

Добавлено через 10 минут
Но там опять же границы div будут друг на друга нахлестнуты... Это конечно не идеальный вариант...
Еще одно из решений - это не отрабатывать действие mouseenter на этих элементах...

Или же наведение на них чтобы тоже вызывало этот ховер эффект...

как trigger

@Vladislav306907 · 20.10.2015, 00:36 **[ТС]**

Первый вариант совсем нет, там вообще ваканалия начинается, второй не за что зацепиться, там достаточно дибильная система получилась. отпишусь что придумаю

Новые блоги и статьи Все статьи Все блоги /
SDL3 для Web (WebAssembly): Основы отладки веб-приложений на SDL3 по USB и Wi-Fi, запущенных в браузере мобильных устройств 8Observer8 07.02.2026 Содержание блога Браузер Chrome имеет средства для отладки мобильных веб-приложений по USB. В этой пошаговой инструкции ограничимся работой с консолью. Вывод в консоль - это часть процесса. . .	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 Использованы. . .

@Almag13 27 / 28 / 16 Регистрация: 18.10.2015 Сообщений: 187
	19.10.2015, 12:28
	Чтобы не пропадал ховер при наведении на иконки, было бы замечательно если бы было вложение этих элементов в area... Код ваш в принципе... только слегка доработанный... 0

@Vladislav306907 0 / 0 / 1 Регистрация: 03.09.2015 Сообщений: 48
	19.10.2015, 17:09 [ТС]
	Пробовал вкладывать в area все это дело, не прокатило... думаю плагин один попробовать 0

@Almag13 27 / 28 / 16 Регистрация: 18.10.2015 Сообщений: 187
	19.10.2015, 18:27
	Есть вариант, вкладывать в див area и принадлежащие к нему точку с заголовком... И mousenter воспроизводить на этот div а не на area, тогда такого бага не будет Добавлено через 10 минут Но там опять же границы div будут друг на друга нахлестнуты... Это конечно не идеальный вариант... Еще одно из решений - это не отрабатывать действие mouseenter на этих элементах... Или же наведение на них чтобы тоже вызывало этот ховер эффект... как trigger 0

@Vladislav306907 0 / 0 / 1 Регистрация: 03.09.2015 Сообщений: 48
	20.10.2015, 00:36 [ТС]
	Первый вариант совсем нет, там вообще ваканалия начинается, второй не за что зацепиться, там достаточно дибильная система получилась. отпишусь что придумаю 0