Foro - Perl en Español

por **slopal** » 2006-03-02 13:13 @592

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

<script language="javascript">
var clickCount = 0;
 
var ZoomImages = new Array();
      ZoomImages[0] = 'imagen_1.jpg';
      ZoomImages[1] = 'imagen_2.jpg';
      ZoomImages[2] = 'imagen_3.jpg';
      ZoomImages[3] = 'imagen_4.jpg';
 
 
function zoomIn(){
 
   var imagen = findDOM('imagenZoom');
   clickCount += 1;
 
   imagen.src = ZoomImages[clickCount];
}
 
function findDOM(objectId) {
   if (document.getElementById) {
     return (document.getElementById(objectId));
   }
   if (document.all) {
     return (document.all[objectId]);
   }
}
</script>
 
Coloreado en 0.001 segundos,  usando GeSHi 1.0.8.4

Y en el HTML:

Sintáxis: [ Descargar ] [ Ocultar ]

Using html4strict Syntax Highlighting

<a href="#" onClick="zoomIn();"><img name="imagenZoom" src="imagen_1.jpg"></a>
Coloreado en 0.001 segundos,  usando GeSHi 1.0.8.4

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

SALUDOS

por **explorer** » 2006-03-02 18:00 @791

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:

Sintáxis: [ Descargar ] [ Ocultar ]

Using html4strict Syntax Highlighting

<map name="mimapa">
  <area shape="rect" coords=" 0, 0, 7, 7" href="/cgi-bin/zoom.pl?zona=1">
  <area shape="rect" coords=" 8, 0,15, 7" href="/cgi-bin/zoom.pl?zona=2">
  <area shape="rect" coords="16, 0,23, 7" href="/cgi-bin/zoom.pl?zona=3">
  <area shape="rect" coords="24, 0,31, 7" href="/cgi-bin/zoom.pl?zona=4">
  <area shape="rect" coords="32, 0,39, 7" href="/cgi-bin/zoom.pl?zona=5">
  <area shape="rect" coords="40, 0,47, 7" href="/cgi-bin/zoom.pl?zona=6">
</map>
Coloreado en 0.001 segundos,  usando GeSHi 1.0.8.4

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

Sintáxis: [ Descargar ] [ Ocultar ]

Using html4strict Syntax Highlighting

<img src="zoom.gif" width="48" height="8" border="0" usemap="#mimapa" vspace="0" hspace="0">
Coloreado en 0.001 segundos,  usando GeSHi 1.0.8.4

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í:

Sintáxis: [ Descargar ] [ Ocultar ]

Using html4strict Syntax Highlighting

<form action="... tu cgi ..." method="POST">
  <input name="area" type="image" src="imagen.gif" alt="Zoom de la imagen">
</form>
Coloreado en 0.001 segundos,  usando GeSHi 1.0.8.4

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

por **macgregor** » 2006-03-06 05:10 @257

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:

Sintáxis: [ Descargar ] [ Ocultar ]

Using html4strict Syntax Highlighting

<MAP NAME="#mapa1">
 
<AREA SHAPE="RECT" COORDS="135,13,309,68" HREF="http://lalala" ALT="zona1">
<AREA SHAPE="RECT" COORDS="2,112,209,168" HREF="http://lololo" ALT="zona2">
...................
</MAP>
Coloreado en 0.001 segundos,  usando GeSHi 1.0.8.4

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

Foro - Perl en Español

Capturar clic sobre una imagen

Capturar clic sobre una imagen

Publicidad

Re: Capturar clic sobre una imagen

MAP ÁREAS

¿Quién está conectado?