JavaScript скрипти Створення роловерів на картах imagemap canvas

Web-технології: База знань

Створення роловерів на картах: imagemap + canvas

Дещо подібне я вже описував у статті CSS Sprites та їх використання. Там описувалося як можна створювати роловер-ефекти за допомогою CSS. У цьому прикладі будемо розглядати використання imagemap + canvas

Роловер (rollover)

Ролловер (rollover)- це інтерактивний графічний елемент, наприклад зображення, яке починає змінюватися при наведенні нею курсора миші чи кліку. Як правило роловери являють собою кілька зображень, що змінюються яваскриптом (або через CSS) при певних подіях. У нашому випадку необхідно, щоб при наведенні курсору миші на ділянку імеджмапи змінювався зовнішній вигляд тільки цієї ділянки, не торкаючись карти в цілому. Слабко?

Для цього у верстці будемо використовувати модель пирога з такими шарами: 1) Верхній: прозорий ГІФ, до якого прив'язана імеджмапа 2) Середній: блок Canvas 3) Нижній: Само зображення з картою. Звичайно, ширина та висота всіх шарів дорівнює одна одній. Дивимося HTML & CSS:

роловерів

Нам необхідно знати, над якою областю проводить зараз користувач курсором миші. Для цього "прикрутимо" за допомогою функції initImageMap обробники подій mouseover & mouseout для елементів області. Одночасно кешуємо в масив координати. Для визначення підтримки клієнтським браузером canvas-а скористаємося функцією canvasBrowser: