Скриптове на JavaScript Създаване на преобръщане върху карти на canvas на imagemap

Уеб технологии: База знания

Създаване на преобръщане върху карти: imagemap + canvas

Нещо подобно вече описах в статията CSS Sprites и тяхното използване. Той описва как можете да създавате ефекти на преобръщане с помощта на CSS. В този пример ще разгледаме използването на imagemap + canvas

преобръщане (преобръщане)

Преместванее интерактивен графичен елемент, като например изображение, което започва да се променя, когато задържите върху него курсора на мишката или когато щракнете върху него. По правило преобръщанията са няколко изображения, които се заменят с Javascript (или чрез CSS) при определени събития. В нашия случай е необходимо, когато преместите курсора на мишката върху секция на картата на изображението, да се промени външният вид само на тази секция, без да се засяга картата като цяло. слаб?

За да направим това, ще използваме пай модел със следните слоеве в оформлението: 1) Горе: прозрачен GIF, към който е прикрепена картата на изображението 2) Средно: Платно блок 3) Долу: Самото изображение с картата. Естествено ширината и височината на всички слоеве са равни една на друга. Преглед на HTML & CSS:

javascript

Трябва да знаем над коя област в момента се намира потребителят с курсора на мишката. За да направим това, ние "закрепваме" манипулаторите на събитията при преминаване на мишката с помощта на функцията initImageMap. mouseout за елементи на областта. В същото време кешираме координатите в масив. За да определите дали клиентският браузър поддържа canvas, използвайте функцията canvasBrowser: