Tenemos un cuestionario que desarrollamos en Flash hace años que utilizaba áreas de resultados para determinar si alguien hacía clic en la parte apropiada de una imagen (piense en "Examen de anatomía"). Estas áreas de impacto fueron muy tediosas para delinear y no hay forma de reutilizar los datos de coordenadas del contorno ...¿Cómo puedo saber si estoy haciendo clic en una parte transparente o no transparente de un png en una página web?
Ahora, estamos tratando de volver a hacer la cosa en HTML - Entonces, tenemos una imagen de fondo de un fémur y un png que se encuentra más arriba en el orden Z, que tiene una porción completamente transparente, mientras que las otras partes tienen 50% de gris. Esto se usa para enseñar al estudiante DONDE algo está en la imagen del fémur de fondo.
Me encantaría poder utilizar los datos de esa capa de máscara PNG en un "modo de interrogación" para determinar si el alumno hizo clic correctamente en una parte específica del fémur ... Estaba pensando en configurar el enmascaramiento png al 100% de transparencia (para que el estudiante no lo vea), pero si el navegador sabía que estaban haciendo clic en el área correcta de la imagen (que es 100% transparente en la máscara), que hicieron clic correctamente.
¿Alguna idea sobre cómo lograr esto con HTML, CSS y/o jQuery?
Perfecto, e incluso utiliza una imagen anatómica. –
En posteriores pruebas de una imagen no cuadrada, tuve que hacer un ajuste: el cálculo de pixelPos debía ajustarse a 4 * (mousePos.x + ancho * mousePos.y) (era alto) y ahora está disponible en http://jsfiddle.net/JKzQN/ –
Whoops :) perdón por eso –