Почему нельзя поменять стиль отдельной области area и чем это заменить
Теги map и area вообще следует применять с осторожностью, всегда можно заменить на канву или применить динамическое управление свойствами других элементов, например, обычных разделов div.
Поскольку тег area - это просто часть картинки, помеченная отдельной ссылкой, нельзя, например, поменять фон под только под одной частью картинки (хотя есть плагин JQuery для подобных решений). Другое дело - визиуализировать в отдельном элементе, какая часть изображения сейчас выбрана на карте (видно при наведении мышки на треугольники):
Ниже показан код примера (файл .html в кодировке Юникода UTF-8).
<!DOCTYPE html> <html lang="ru"> <head> <meta charset="utf-8"> <title>Карта-изображение</title> </head> <body> <p><img src="imageMapWithId.png" width="200" height="200" alt="Выбор области" usemap="#selection1"></p> <map name="selection1"> <area shape="poly" href="#" coords="0,0,100,100,199,0" alt="Область 1" title="Область 1" id="area_1"> <area shape="poly" href="#" coords="199,0,100,100,199,199" alt="Область 2" title="Область 2" id="area_2"> <area shape="poly" href="#" coords="199,199,100,100,0,199" alt="Область 3" title="Область 3" id="area_3"> <area shape="poly" href="#" coords="0,199,100,100,0,0" alt="Область 4" title="Область 4" id="area_4"> </map> <p id="selected_area"> </p> <script> function script (event) { let element = event.target; document.getElementById('selected_area').innerHTML = 'Выбрана область ' + element.title; event.preventDefault(); return false; } window.addEventListener ('load', function (e) { for (let n = 1; n <= 4; n++) { let el = document.getElementById('area_'+n); el.addEventListener('mouseover', script); } }); </script> <noscript> <p style="text-align: center;">Нужен включённый в браузере Javascript для работы приложения!</p> </noscript> </body> </html>
картинка imageMapWithId.png
11.08.2020, 23:10 [1029 просмотров]