Foro - Perl en Español

Con mi programa devuelvo una imagen en la página HTML de salida.

¿Hay alguna manera de captar un clic (o varios) encima de esta imagen, para entonces, ejecutar alguna otra cosa?

(en realidad lo que quiero es "dividir" esa imagen en 10 partes, y según la que se pulse, volver a generar una imagen de esa parte, pero a escala más grande, como una especie de zoom).

Thanx

Umm, lo que necesitas lo puedes hacer con Javascript, se me ocurre algo así:
Y en el HTML:

No lo he probado pero debe de funcionar más o menos como necesitas, a lo mejor tengas que cambiar algunas cosas.


SALUDOS

slopal escribiste:(en realidad lo que quiero es "dividir" esa imagen en 10 partes, y según la que se pulse, volver a generar una imagen de esa parte, pero a escala más grande, como una especie de zoom).

Para hacer la imagen pinchable por zonas tienes que hacer un mapa.

Hay dos soluciones, del lado del cliente, para saber en qué punto el usuario pincha la imagen.

La primera se basa en hacer un mapa HTML, dividida por zonas y la segunda consiste en recibir las coordenadas 'x' e 'y' del punto de la imagen pinchado.

En la primera solución, lo que primero haces, en el código HTML, creas un mapa de la siguiente forma:

Luego, en la marca de la imagen pones la referencia a ese mapa, con usemap:

Todo este código lo puedes generar con tus programas, desde luego. Y si el mapa siempre es el mismo, lo guardas en el servidor web y en usemap pones el URI al mapa.

Otra forma es recibiendo las coordenadas 'x' e 'y' del pixel pulsado. Luego, en tu programa, tendrás que hacer unas cuentas para saber qué zona tendrás que ampliar.

Para esta solución, tienes que hacer un <form> dentro de la página. Algo así:
Cuando el usuario pulse sobre esa imagen, recibirás en tu cgi dos parámetros: area.x y area.y, con las coordenadas.

En esta solución también se puede agregar un mapa HTML, como en la solución primera.

Una tercera solución consiste en hacer el mapa en el lado del servidor.

Se puede hacer algo así:
<a href="http://tudominio.com/cgi-bin/zoom.pl"><img src="imagen.gif" ismap alt="Zoom de la imagen"></a>

El resultado es que cuando el usuario pulse en la imagen, el navegador estará llamando a http://tudominio.com/cgi-bin/zoom.pl?122,32, siendo las dos últimas cifras las coordenadas 'x' e 'y' del punto pulsado.

Mapas desde el lado del cliente
Mapas desde el lado del servidor
Tipos de controles de entrada de datos en un form

Para hacer lo que quieres necesitas crear mapa áreas en la imagen.

Puedes hacerlas de forma circular, rectangular, definir un polígono o incluso solo puntos.

Como crearlas:

Para asignar esas áreas a tu imagen lo haces al definir la imagen en cuestión.

<IMG SRC="tuimagen.gif" BORDER="0" USEMAP="#mapa1">

Puedes definirlo usando ISMAP en lugar de USEMAP, pero te recomiendo USEMAP que se interpreta en el cliente en lugar de en el servidor.

Posibles áreas a definir:

PUNTOS:
<AREA SHAPE="POINT" COORDS="x,y" HREF="http://lalala.com/punto.cgi" ALT="punto">

RECTÁNGULOS:
<AREA SHAPE="RECT" COORDS="ax,ay,bx,by" HREF="http://lalala.com/rectangulo.cgi" ALT="rectangulo">
(si 'ay' y 'by' son iguales en realidad creas una línea).

POLÍGONOS:
<AREA SHAPE="POLY" COORDS="ax,ay,bx,by,cx,cy....ax,ay" HREF="http://lalala.com/poligono.cgi" ALT="poligono">
(defines los vértices del polígono, ¡ojo! Hay que cerrar el polígono repitiendo el primer vértice)

RESTO IMAGEN:
<AREA SHAPE="DEFAULT" HREF="http://lalala.com/resto.cgi" ALT="resto">
(también puedes escoger que no haga nada el resto de la imagen)

<AREA SHAPE="DEFAULT" NOHREF>

En tu caso como quieres hacer un zoom puedes capturar el lugar donde se pulsó con el ratón definiendo el área dentro de un <form> y volver a crear tu imagen ampliando una zona desde las coordenadas pulsadas.

Espero que te ayude en algo

Un saludo.

EDITANDO: ¡je,je! Como movieron el mensaje no vi que ya tenía respuestas