Наведите курсор только на непрозрачную часть изображения

Question

Есть ли способ сделать только непрозрачную часть изображения, чтобы вызвать событие наведения мыши?

Если мышь перемещается в прозрачную область, необходимо активировать указатель мыши и скриптследует прослушивать любое наведение мыши на слой под изображением.

Возможно ли это?Спасибо за любой ввод.

Редактировать: Я хочу сделать это без использования вспышки.

Answer 1

Вы можете использовать изображение со старомодными тегами <map> и <area>.Тег области может вызывать события мыши javascript (например, этот плагин jQuery: jQuery maphilight ).
Однако, нет хорошего способа динамического создания карты - вам придется это сделатьвручную или вызовите службу на стороне сервера, чтобы сопоставить ее.

Answer 2

ImageMapster выглядит как хороший простой способ получить карты областей изображения рабочий кросс-браузер (IE6 +, требуется jQuery).

Другой вариант - использовать raphael.js , который создает вектор SVG изображений, которые переведены для работы во всем, начиная с IE6 и выше (я полагаю, все, кроме стандартного браузера в некоторых старых телефонах Android).Они могут управляться с использованием javascript различными способами и могут иметь все стандартные события, например, при наведении мыши, щелчке и т. Д.

Здесь Рафаэль работает лучше, чем опция Flash, поскольку он не зависит от Flash.Он менее прост, чем опция карты местности, и имеет крутой график обучения, но для сложных случаев и динамически изменяющихся форм он дает дополнительное преимущество благодаря широкому спектру способов управления создаваемыми векторными изображениями.

Answer 3

Вы можете отобразить, где находятся прозрачные части изображения (учитывая этот пример хроматический ключ , вы можете сделать это в коде на стороне клиента в некоторых браузерах), а затем сравнить положение событие mousemove, чтобы увидеть, находится ли указатель над прозрачной частью или нет. Затем вам просто нужно добавить переменную, чтобы отслеживать, была ли она больше той части, которую вы проверяли в прошлый раз или нет.

Answer 4

Это возможно, если вы используете Flash .

Несколько советов здесь

• загрузка непропорционального изображения с помощью Flash, запись обработчиков событий щелчка внутри flash (и передача его в javascript при нажатии)
• загрузить флэш-объект с прозрачным флагом
• установить для объекта или тега внедрения очень большой индекс zIndex, например 9999, или что-то подобное, чтобы сделать его сверху

Answer 5

Вы можете создать дочерний элемент div с фиксированной высотой, равной приблизительному размеру прозрачной области, абсолютно расположенной над ним с пустым фоном и рамкой, а затем добавить сценарии для активации этого элемента или содержимого внутри элемента.

Answer 6

Насколько я знаю, пока невозможно обнаружить прозрачную часть изображения.