Как можно при наведении подсвечивать area в map?

В JavaScript, чтобы подсветить элемент area карты при наведении, вы можете использовать события мыши. Ниже приведен подробный код, показывающий, как достичь этого.

HTML-разметка должна содержать элемент карты <map> и его области <area>. Каждая область должна иметь атрибуты на определенные события мыши, например onmouseover и onmouseout, чтобы отслеживать наведение и отведение мыши соответственно. Области также должны быть привязаны к соответствующим обработчикам событий в JavaScript.

Ниже приведен пример HTML-кода:

<img src="your_image.jpg" usemap="#your_map">
<map name="your_map">
  <area shape="rect" coords="0,0,50,50" onmouseover="highlightArea(this);" onmouseout="unhighlightArea(this);">
  <area shape="rect" coords="50,50,100,100" onmouseover="highlightArea(this);" onmouseout="unhighlightArea(this);">
</map>

В JavaScript, вы можете создать функции highlightArea и unhighlightArea, чтобы подсветить и убрать подсветку области соответственно. Эти функции могут изменять стили элементов area, например цвет фона и цвет границы.

Ниже приведен пример JavaScript-кода:

function highlightArea(area) {
  area.style.backgroundColor = 'yellow';
  area.style.borderColor = 'red';
}

function unhighlightArea(area) {
  area.style.backgroundColor = '';
  area.style.borderColor = '';
}

Это всего лишь пример реализации. Вы можете настроить стили под свои потребности, используя CSS.

Обратите внимание, что события мыши onmouseover и onmouseout также могут быть заменены событиями onmouseenter и onmouseleave в зависимости от ваших потребностей и совместимости браузера.