БлогNot. Почему нельзя поменять стиль отдельной области area и чем это заменить

Почему нельзя поменять стиль отдельной области area и чем это заменить

Теги map и area вообще следует применять с осторожностью, всегда можно заменить на канву или применить динамическое управление свойствами других элементов, например, обычных разделов div.

Поскольку тег area - это просто часть картинки, помеченная отдельной ссылкой, нельзя, например, поменять фон под только под одной частью картинки (хотя есть плагин JQuery для подобных решений). Другое дело - визиуализировать в отдельном элементе, какая часть изображения сейчас выбрана на карте (видно при наведении мышки на треугольники):

Выбор области

Область 1 Область 2 Область 3 Область 4

 

Ниже показан код примера (файл .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">&nbsp;</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
картинка imageMapWithId.png

11.08.2020, 23:10 [1029 просмотров]


теги: javascript html памятка графика

К этой статье пока нет комментариев, Ваш будет первым