1. Inicio
  2. Pregunta y respuesta
  3. ¿Cómo puedo saber si estoy haciendo clic en una parte transparente o no transparente de un png en una página web?

¿Cómo puedo saber si estoy haciendo clic en una parte transparente o no transparente de un png en una página web?

2011-04-12 8 views
5

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?

Fuente

2011-04-12 Chris Brandt

Respuesta

5

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

C'est Voila!

(no funciona en IE, y la imagen tiene que estar en el mismo dominio que el sitio, por lo que no hay imágenes externas - de ahí la razón por la que una URI de datos utilizado en mi ejemplo)

(o un ejemplo más aburrido: http://jsfiddle.net/cwolves/GaEeG)

Fuente

2011-04-13 20:38:40

+0

Perfecto, e incluso utiliza una imagen anatómica. –

+0

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/ –

+0

Whoops :) perdón por eso –

1

Lo sentimos, no hay forma de hacerlo con PNG.

Necesita otro tipo de máscara, un mapa de imágenes HTML es la manera más simple, o dependiendo de las dependencias de su navegador, SVG es una opción.

Fuente

2011-04-12 23:32:24

1

Creo que tendrá que procesar ese lado del servidor o buscar una biblioteca de JavaScript que pueda decodificar la imagen píxel por píxel.

PNG sigue capturando un evento de clic en una parte transparente de PNG. Esto es bastante poco intuitivo para un PNG semitransparente que está indexado z por encima de otra cosa, pero ese es el comportamiento estándar.

Fuente

2011-04-12 23:34:50 Leopd

1

mi primera idea era construir mapas de imagen , de esa manera puede controlar lo que se hace clic.

Aparte de eso, no tengo ni idea y no creo que puedas hacerlo con un simple clic en un archivo PNG.

Fuente

2011-04-12 23:35:42 jackJoe

+0

Imagino que un mapa de imagen HTML, aunque es la única idea que podría pensar también, podría vencer el propósito del cuestionario. Esto permitiría que la persona que toma el cuestionario recorra las posibles opciones, o busque el ratón, y posiblemente arruine parte de la pregunta. –

+1

Lo he dicho, y la solución es tener mapas de imágenes para todas las partes del hueso, y posiblemente con javascript controlar el cursor, y tal vez evitar las trampas. No es fácil, pero IMO es posible. – jackJoe

Cuestiones relacionadas

 Cuestiones relacionadas