Javascript-форум - замена картинки при наведении курсора на область

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)

замена картинки при наведении курсора на область

Здравствуйте!
Разрешите обратиться к знающим людям по решению моей проблемы. Имеется сайт на ворд пресс, создаю страницу со структурой, для наглядности хочется создать замену рисунка при наведении на область.
Страница: 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>
Помогите решить проблему смены картинки во всех браузерах (минимум в основных).
Большое спасибо за помощь!

Цитата:

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

замена картинки при наведении курсора на область

Как вариант...
http://htmlbook.ru/faq/kak-sdelat-ch...vedenii-na-nee

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

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

В хроме, ИЕ, ФФ, Опера работает.

<!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>

Цитата:

Сообщение от 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>

Не могу понять!
Код тот же самый (только измен размер картинки), но на сайте он не работает, точнее работает на всех браузерах кроме хром. При просмотре изображения по Вашему сообщению все работает! :(

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

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

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

похоже на проблему

Цитата:

user agent stylesheet как отключить