Javascript-форум (https://javascript.ru/forum/)
-   Элементы интерфейса (https://javascript.ru/forum/dom-window/)
-   -   замена картинки при наведении курсора на область (https://javascript.ru/forum/dom-window/68587-zamena-kartinki-pri-navedenii-kursora-na-oblast.html)

sasha1427 25.04.2017 10:15
замена картинки при наведении курсора на область
 
Здравствуйте!
Разрешите обратиться к знающим людям по решению моей проблемы. Имеется сайт на ворд пресс, создаю страницу со структурой, для наглядности хочется создать замену рисунка при наведении на область.
Страница: http://spas.as-ugra.ru/?page_id=894 (при наведении на последний жетон в браузере Яндекс все работает, к примеру в Хром нет)
Сам код:
<img src="http://spas.as-ugra.ru/wp-content/uploads/2017/04/struktura_RPSB.png" alt="" usemap="#karta" width="1200" height="1600" name="pic1" border="0" />
<map name="karta">
<area title="Зональный поисково-спасательный отряд (Нижневартовский район)" coords="450,913,750,1013" onMouseOver="document.pic1.src='http://spas.as-ugra.ru/wp-content/uploads/2017/04/struktura_RPSB-nv.png'" onMouseOut="document.pic1.src='http://spas.as-ugra.ru/wp-content/uploads/2017/04/struktura_RPSB.png'" shape="rect" href="http://tel.as-ugra.ru/" target="_blank" />
</map>
Помогите решить проблему смены картинки во всех браузерах (минимум в основных).
Большое спасибо за помощь!

ksa 25.04.2017 10:41
Цитата:
Сообщение от sasha1427
замена картинки при наведении курсора на область
Как вариант...
http://htmlbook.ru/faq/kak-sdelat-ch...vedenii-na-nee

sasha1427 25.04.2017 11:26
спасибо! но полагаю это применение стилей, а следовательно вряд ли решение.

рони 25.04.2017 11:39
sasha1427,
смотрите почему в хроме area не имеют размера и следовательно на них нельзя навести курсор.

Dilettante_Pro 25.04.2017 11:50
В хроме, ИЕ, ФФ, Опера работает.
<!DOCTYPE html>
<img src="http://spas.as-ugra.ru/wp-content/uploads/2017/04/struktura_RPSB.png" alt="" usemap="#karta" width="850" height="1200" name="pic1" border="0" />
<map name="karta">
<area title="Зональный поисково-спасательный отряд (Нижневартовский район)" coords="500,1030,800,1130" onMouseOver="document.pic1.src='http://spas.as-ugra.ru/wp-content/uploads/2017/04/nv.png'" onMouseOut="document.pic1.src='http://spas.as-ugra.ru/wp-content/uploads/2017/04/struktura_RPSB.png'" shape="rect" href="http://tel.as-ugra.ru/" target="_blank" />
</map>

sasha1427 25.04.2017 15:11
Цитата:
Сообщение от Dilettante_Pro (Сообщение 451001)
В хроме, ИЕ, ФФ, Опера работает.
<!DOCTYPE html>
<img src="http://spas.as-ugra.ru/wp-content/uploads/2017/04/struktura_RPSB.png" alt="" usemap="#karta" width="850" height="1200" name="pic1" border="0" />
<map name="karta">
<area title="Зональный поисково-спасательный отряд (Нижневартовский район)" coords="500,1030,800,1130" onMouseOver="document.pic1.src='http://spas.as-ugra.ru/wp-content/uploads/2017/04/struktura_RPSB-nv.png'" onMouseOut="document.pic1.src='http://spas.as-ugra.ru/wp-content/uploads/2017/04/struktura_RPSB.png'" shape="rect" href="http://tel.as-ugra.ru/" target="_blank" />
</map>
Не могу понять!
Код тот же самый (только измен размер картинки), но на сайте он не работает, точнее работает на всех браузерах кроме хром. При просмотре изображения по Вашему сообщению все работает! :(

рони 25.04.2017 15:20
sasha1427,
попробуйте отключать скрипты и css по одному и смотреть

Dilettante_Pro 25.04.2017 15:29
sasha1427,
На вашем сайте в моем хроме (Версия 57.0.2987.133) все работает.

рони 25.04.2017 15:50
Dilettante_Pro,
таже версия и новее Версия 58.0.3029.81 в обох нет размера у area - наводить мышь невозможно

рони 25.04.2017 15:56
похоже на проблему
Цитата:
user agent stylesheet как отключить

Dilettante_Pro 25.04.2017 16:24
sasha1427,
Заменил жетон в макете на вашу новую версию
Ваш сайт с новой версией картинки по-прежнему работает - верхний и нижний жетоны, даже на смартфоне в хроме

ЗЫ: Жетоны на сайте оживают один за другим - проблема решена?
(сам проверить не могу - все работает)

рони 25.04.2017 16:25
Dilettante_Pro,
какая система?

Dilettante_Pro 25.04.2017 16:38
рони,
Windows 7 Корп. Service Pack 1
Обновил хром до вашей версии - все равно работает.

рони 25.04.2017 16:51
Dilettante_Pro,
Windows 10 - хром упорно добавляет свои стили, либо считает что стили отсутствуют, либо в стилях видит ошибку и ставит свои.

Dilettante_Pro 25.04.2017 16:53
рони,
Андроид скромнее - на смартфоне работает

рони 25.04.2017 16:55
sasha1427, :write: заработало ... что изменили?

sasha1427 25.04.2017 17:12
Ребята, страницу дописывал т.к. все таки надеюсь на возможное решение проблемы. Писал на работе в свободное время, пришел домой, запустил хром, все работает (версия Версия 17.3.1.840.) завтра посмотрю, что за версия на работе. (Далеко не специалист в данном вопросе читаю все на форумах, но подобного не встречал без скриптов. Поэтому Спасибо за помощь!) По итогам обязательно отпишусь.

sasha1427 26.04.2017 07:26
Версия хром 57.0.2987.133 - не работает(
Проблема не решена!

sasha1427 26.04.2017 07:58
Подскажите пожалуйста может необходимо какие то классы применить? или?

Dilettante_Pro 26.04.2017 10:32
sasha1427,
Цитата:
Сообщение от sasha1427
Версия хром 57.0.2987.133 - не работает(
А у рони заработало
Еще и операционка у него Win 10
У меня же все упорно работает, поэтому трудно искать пути решения проблемы, которой не видно

sasha1427 26.04.2017 13:10
На самом деле код не менял, делал остальные жетоны по представленной аналогии 1 сообщения. По каким причинам заработало у участников темы не знаю.
- обновил браузер до версии 58 - вопрос не решился
- удалил браузер (хром), установил - заработало.
Дело в том, что с кем не разговаривал по телефону практически всегда просил зайти на сайт (некий опрос) у 70% не работало, для меня причина так и осталась не известной.
Надеюсь тема поможет людям столкнувшихся с похожей проблемой.
Спасибо за ваше время!

Dilettante_Pro 26.04.2017 13:15
sasha1427,
Цитата:
Сообщение от sasha1427
- удалил браузер (хром), установил - заработало.
Может, у вас получился способ диагностики исправности браузера?

sasha1427 28.04.2017 08:22
Очень бы хотел знать, но...


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