Как можно создать эффект подсвечивания области при наведении курсора в HTML-карте изображения?

Как можно осуществить подсветку области (area) на веб-странице без использования jQuery? Требуется информация о подобных решениях на чистом JavaScript.
  • 28 декабря 2023 г. 11:57
Ответы на вопрос 2
Для создания эффекта подсвечивания области при наведении курсора на HTML-карту изображения без использования jQuery, вы можете использовать нативные JavaScript события и методы.

1. В вашем HTML-документе создайте элемент карты изображения, например:
```html
<img src="image.jpg" usemap="#map">

<map name="map">
    <area shape="rect" coords="0,0,100,100" href="#" alt="Area 1">
    <area shape="rect" coords="100,100,200,200" href="#" alt="Area 2">
</map>
```

2. В JavaScript-коде получите ссылки на все элементы area внутри карты изображения:
```javascript
var areas = document.getElementsByTagName('area');
```

3. Добавьте обработчики событий mouseover и mouseout для каждого элемента area, чтобы создать эффекты подсветки:
```javascript
for (var i = 0; i < areas.length; i++) {
  areas[i].addEventListener('mouseover', function() {
    this.style.backgroundColor = 'yellow';
  });

  areas[i].addEventListener('mouseout', function() {
    this.style.backgroundColor = '';
  });
}
```

Теперь, когда курсор наводится на любую область изображения, она будет подсвечиваться желтым цветом. При уходе курсора с области, подсветка исчезнет.

Вы также можете изменять другие свойства элемента area, такие как цвет границы или прозрачность, чтобы создать более сложные эффекты подсветки.
Я использовал maphilight.js
Похожие вопросы