Виділення областей зображення за допомогою

Виділення областей зображення за допомогою maphilight.js

У цій замітці ми будемо знайомитися з дуже цікавим на мій погляд jquery-плагіном maphilight.js. Наведіть мишку на картинку, кожна кімната позначається областю, виводиться опис для кожної частини квартири: назва, площа, опис. Такий ефект можна використовувати для виділення областей на географічній карті, креслярських схемах і т.д.

Давайте розберемося, як це працює. Для реалізації такого завдання нам потрібно jquery-плагін maphilight.js. бібліотека jquery, необхідне зображення і ресурс, який дозволить відзначити області на зображенні.

Підключаємо необхідні бібліотеки:

Додаємо стилі для зринаючі підказки:

Додаємо js-скрипти для обробки рухів миші і додаванні зринаючі підказки з описом:

Додаємо тег з шуканим зображенням:

Вирушаємо на сайт для виділення областей. Слідуємо інструкції по скрін:

Копіюємо теги area без тега map. Додаємо в кожен тег area наступний атрибут зі значенням: "" і поміщаємо його в тег: "" таким чином, щоб код виглядав застосува так:

У підсумку, якщо ви зробили все правильно, повинна відкритися картинка, при наведенні на яку виділяються області.

Як бонус ще один приклад реалізації областей: Кошеня "ГАВ" і його частини тіла)