 Jue Mar 02, 2006 12:13 pm
|
 |
slopal
Perlero Nuevo
|
Registrado: 23 Nov 2005
Mensajes: 78
|
|
| Capturar click sobre una imagen |
 |
|
Con mi programa devuelvo una imagen en la pagina html de salida.
Hay alguna manera de captar un click (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 segun la que se clique, volver a generar una imagen de esa parte, pero a escala mas grande, como una especie de zoom).
Thanx |
|
|
|
|
Jue Mar 02, 2006 12:59 pm
|
|
kidd
Creador de Perl en Español
|
Registrado: 15 Oct 2003
Mensajes: 1389
Ubicación: México
|
|
|
|
|
Umm, lo que necesitas lo puedes hacer con javascript, se me ocurre algo así:
| Código: |
<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>
|
Y en el HTML:
| Código: |
<a href="#" onClick="zoomIn();"><img name="imagenZoom" src="imagen_1.jpg"></a>
|
No lo he probado pero debe de funcionar más o menos como necesitas, a lo mejor tengas que cambiar algunas cosas.
SALUDOS |
|
|
Jue Mar 02, 2006 5:00 pm
|
|
explorer
Moderador
|
Registrado: 24 Jul 2005
Mensajes: 4128
Ubicación: Valladolid, España
|
|
| Re: A lo mejor pregunto una tontería, pero... :oops: |
|
|
| slopal escribió: | | (en realidad lo que quiero es "dividir" esa imagen en 10 partes, y segun la que se clique, volver a generar una imagen de esa parte, pero a escala mas 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:
| Código: |
<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> |
Luego, en la marca de la imagen pones la referencia a ese mapa, con usemap:
| Código: |
| <img src="zoom.gif" width="48" height="8" border="0" usemap="#mimapa" vspace="0" hspace="0"> |
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í:
| Código: |
<form action="... tu cgi ..." method="POST">
<input name="area" type="image" src="imagen.gif" alt="Zoom de la imagen">
</form> |
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í:
| Código: |
| <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 |
|
|
Lun Mar 06, 2006 4:10 am
|
|
macgregor
Perlero Frecuente
|
Registrado: 09 Dic 2004
Mensajes: 117
Ubicación: españa
|
|
| MAP AREAS. |
|
|
Para hacer lo que quieres necesitas crear map areas en la imagen.
Puedes hacerlas de forma circular, rectangular, definir un poligono o incluso solo puntos.
Como crearlas :
| Código: |
<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> |
Para asignar esas areas a tu imagen lo haces al definir la imagen en cuestion.
| Código: |
| <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 areas a definir:
PUNTOS:
| Código: |
| <AREA SHAPE="POINT" COORDS="x,y" HREF="http://lalala.com/punto.cgi" ALT="punto"> |
RECTANGULOS:
| Código: |
| <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 linea)
POLIGONOS:
| Código: |
| <AREA SHAPE="POLY" COORDS="ax,ay,bx,by,cx,cy....ax,ay" HREF="http://lalala.com/poligono.cgi" ALT="poligono"> |
(defines los vertices del poligono, ojo! hay que cerrar el poligono repitiendo el primer vertice)
RESTO IMAGEN:
| Código: |
| <AREA SHAPE="DEFAULT" HREF="http://lalala.com/resto.cgi" ALT="resto"> |
(tambien puedes escoger que no haga nada el resto de la imagen.)
| Código: |
| <AREA SHAPE="DEFAULT" NOHREF> |
En tu caso como quieres hacer un zoom puedes capturar el lugar donde se clicó con el mouse definiendo el area dentro de un form y volver a crear tu imagen ampliando una zona desde las coordenadas clicadas.
Espero que te ayude en algo 
Un saludo.
EDITANDO: jeje como movieron el mensaje no vi que ya tenia respuestas  |
|
Powered by phpBB © 2001, 2005 phpBB Group
|
