Как я могу узнать, нажимаю ли я на прозрачную или непрозрачную часть png на веб-странице? - PullRequest
5 голосов
/ 13 апреля 2011

У нас есть тест, который мы разработали во Flash несколько лет назад и который использовал области попадания, чтобы определить, щелкнул ли кто-нибудь по соответствующей части изображения (например, «Анатомическая викторина»). Эти области попадания были очень утомительны для контура, и нет возможности повторно использовать данные координат контура ...

Теперь мы пытаемся сделать это заново в HTML. Итак, у нас есть фоновое изображение бедренной кости и png, который расположен выше в Z-порядке, и его часть полностью прозрачна, а другие части имеют 50% серого. Это используется, чтобы научить студента ГДЕ что-то находится на фоновом изображении бедра.

Мне бы хотелось иметь возможность использовать данные из этого слоя маски png в «режиме викторины», чтобы определить, правильно ли студент щелкнул мышкой по определенной части бедренной кости ... Я думал установить png для маскировки до 100% прозрачности (таким образом, ученик не видит его), но если браузер знал, что они щелкали в правильной области изображения (то есть на 100% прозрачно на маске), то они нажимали правильно.

Есть идеи, как этого добиться с помощью HTML, CSS и / или jQuery?

Ответы [ 5 ]

5 голосов
/ 14 апреля 2011

http://jsfiddle.net/cwolves/GaEeG/2/

C'est Voila!

(не будет работать в IE, и изображение должно быть в том же домене, что и сайт, поэтому никакие внешние изображения -- следовательно, причина, по которой я использовал URI данных в моем примере)

(или более скучный пример: http://jsfiddle.net/cwolves/GaEeG)

1 голос
/ 13 апреля 2011

Моей первой идеей было создание карт изображений, чтобы вы могли контролировать то, что нажимается.

Кроме этого, я понятия не имею и не думаю, что вы можете сделать это простым нажатием наPNG.

1 голос
/ 13 апреля 2011

Я думаю, вам нужно либо обработать эту серверную часть, либо найти библиотеку javascript, которая может декодировать пиксель за пикселем изображения.

Событие щелчка на прозрачной части PNG все еще сохраняетсяпо PNG.Это довольно не интуитивно понятно для полупрозрачного PNG, который z-индексирован выше чего-то другого, но это стандартное поведение.

1 голос
/ 13 апреля 2011

Здесь это делается в Action Script ... (я думаю), я не знаю, как или если это можно сделать в Javascript, хотя

http://dougmccune.com/blog/2007/02/03/using-hittestpoint-or-hittest-on-transparent-png-images/

1 голос
/ 13 апреля 2011

Извините, с помощью PNG это сделать невозможно.

Вам понадобится маска другого типа, наиболее простой способ - карта изображений HTML или, в зависимости от зависимостей браузера, вариант SVG.

...