obtener coordenadas de una imagen

payo22 · #1 (**permalink**) 23/04/2004, 11:13

hola Maestros:

quiesiera ver si me pueden ayudar con estas dudas :

1.- en una pagina tengo una imagen y no se si se puedan obtener las coordenas de esa imagen.

2.- si en la imagen se puede dibujar un rectangulo con el mouse y obtener la coordenadas de ese rectangulo con respecto a la imagen.

gracias por su apoyo.

caricatos · #2 (**permalink**) 23/04/2004, 15:11

Hola payo22:

Hace tiempo hice esta página para ayudar en un tema de KarlanKas (¡Hola

!): http://www.pepemolina.com/coordes/coordes.html
El script para hallar las coordenadas y la posición inicial lo puedes rescatar de la misma página

En otra página, también con una valiosísima ayuda de KarlanKas (y más foreros

) se ha podido redimensionar capas con el ratón: http://www.pepemolina.com/postales/index.html

También la puedes mirar... y en lo que no entiendas no dudes en preguntar.

Saludos

payo22 · #3 (**permalink**) 27/04/2004, 08:32

Hola caricatos:

antes que nada gracias por contestar.

tengo una duda como paso esas variables que me dan las coordenadas a un script php, he visto que en el evento onclick muestra la coordenadas en las que se dio el click ademas de las coordenadas de inicio de la imagen pero ahora como puedo pasarlas a php?

disculpa si es algo sencillo pero no se como hacerlo.

gracias.

caricatos · #4 (**permalink**) 27/04/2004, 12:44

Hola otra vez:

Tan solo tienes que asignar las coordenadas a sendos campos (x, y por ejemplo) de un formulario con el método que quieras... incluso con el método get las puedes pasar a otra página html, y hacer submit...

Supongo que no tendrás prioblemas para recibirlas...

<?php $x = $_GET["x"]; ?>

... para enviarlas
<form name=coordenadas action=destino.php method=get>
<input type=hidden name=x>
<input type=hidden name=y>
</form>

Puedes ver otra página en donde trabajé algo en ese tema: http://www.pepemolina.com/mapas/index.html

Saludos

payo22 · #5 (**permalink**) 27/04/2004, 15:28

por ejemplo si tengo esto como lo paso por un campo hidden:

Código PHP:

  <html> 
<!copiar dentro del tag HEAD --> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" > 
                                                                                                               
<script language="JavaScript"> 
                                                                                                               
var ns4 = (document.layers)? true:false 
var ie4 = (document.all)? true:false 
var ns6 = (document.getElementById && !document.all) ? true: false; 
var coorX, coorY, iniX, iniY; 
                                                                                                               
if (ns6) document.addEventListener("mousemove", mouseMove, true) 
if (ns4) {document.captureEvents(Event.MOUSEMOVE); document.mousemove = mouseMove;} 
                                                                                                               
function mouseMove(e) 
{ 
        if (ns4||ns6)   {coorX = e.pageX; coorY = e.pageY;} 
        if (ie4)        {coorX = event.x; coorY = event.y;} 
        return true; 
} 
                                                                                                               
function ini()  { 
if (ie4)        document.body.onmousemove = mouseMove; 
iniX = document.getElementById("recuadro").offsetLeft; 
iniY = document.getElementById("recuadro").offsetTop; 
} 
                                                                                                               
function coordenadas()  { 
alert ("Pinchó las siguientes coordenadas:\nx:" + coorX + "\ny: " + coorY + "\niniX = " + iniX + "\niniY = " + iniY); 
} 
                                                                                                               
function mostrar()      { 
        document.getElementById("ayuda").style.top = coorY + 10; 
        document.getElementById("ayuda").style.left = coorX + 10; 
        document.getElementById("ayuda").style.visibility = "visible"; 
        document.getElementById("ayuda").innerHTML = "x = " + coorX +"<br>y = " + coorY; 
} 
                                                                                                               
function ocultar()      { 
        document.getElementById("ayuda").style.visibility = "hidden"; 
} 
function mover()        { 
        document.getElementById("ayuda").style.top = coorY + 10; 
        document.getElementById("ayuda").style.left = coorX + 10; 
        document.getElementById("ayuda").style.visibility = "visible"; 
        document.getElementById("ayuda").innerHTML = "x = " + coorX +"<br>y = " + coorY; 
} 
                                                                                                               
</script> 
</head> 
                                                                                                               
<body onload="ini()" > 
<div align=center> 
<h3> 
... Mueve el raton por la imagen y mira el recuadro ... 
</h3> 
                                                                                                               
<img src=images1.jpg onclick="coordenadas()" onmouseover="mostrar()" onmousemove="mover()" 
onmouseout="ocultar()" id="recuadro" 
> 
                                                                                                               
</div> 
<div id="ayuda" style=" visibility:hidden; 
position:absolute; 
background:yellow; 
font:normal 10px/10px verdana; 
color:black; 
border:solid 1px black; 
text-align:justify; 
padding:10px 10px 10px 10px;"> 
</div> 
                                                                                                               
                                                                                                               
</body> 
</html>

si lo que quiero es coorX y coor Y

ya que al enviarlas como dices :

<input type=hidden name=coorX>
<input type=hidden name=cooY>

no pasa nada.

gracias por toda tu ayuda.

caricatos · #6 (**permalink**) 27/04/2004, 15:45

Hola otra vez:

En el ejemplo deberías cambiar la función coordenadas por:

function coordenadas() {
/*
alert ("Pinchó las siguientes coordenadas:\nx:" + coorX + "\ny: " + coorY + "\niniX = " + iniX + "\niniY = " + iniY);
*/
document.forms.coordenadas.x.value = coorX;
document.forms.coordenadas.y.value = coorY;
document.forms.coordenadas.submit();
}

... No dudes en hacer preguntas

... el ejemplo es el de la página que te he mostrado, pero supongo que tendrás que personalizarlo...

Al usarse "coordenadas" en dos sitios distintos podría haber algún "conflicto"... no es nada recomendable usar los mismos nombres en partes distintas de una página. Te recomiendo que renombres adecuadamente los nombres.

Saludos

payo22 · #7 (**permalink**) 27/04/2004, 15:52

gracias por todo caricatos lo voy a probar

payo22 · #8 (**permalink**) 28/04/2004, 10:04

que tal caricatos aqui de nuevo sabes ayer probe la modificacion que hiciste en coordenadas pero ahi me manda un error me dice que no es un objeto y ya no hace nada aque se debe.

esto en la funcion coordenadas al hacer click

caricatos · #9 (**permalink**) 28/04/2004, 14:12

Hola otra vez:

Creo que la parte teórica es correcta, pero he visto que en tu formulario, uno de los datos ocultos no está bien puesto:

<input type=hidden name=coorX>
<input type=hidden name=coor Y>

Otra cosa posible es que hayas usado el mismo nombre para 2 cosas distintas (coorX.. coorY también son variables javascript... yo te había propuesto x,y)

Y la última cosa que se me ocurre que pueda ser causa del error es que no le hayas dado al formulario su nombre >form name=formulario ... >

Si chequeando estas cosillas, sigues con problemas, pon el código completo, o un link hacia la página (si puedes subirla)

Saludos

payo22 · #10 (**permalink**) 28/04/2004, 16:03

que tal caricatos:

mira aqui te envio los 2 scripts haber si tu encuentras en donde esta el error:

archivo javascript:

Código PHP:

  <html> 
<head> 
<script language="JavaScript"> 
var x,y; 
str = location.search; 
                                                                                                                              
if (str != "") { 
                                                                                                                              
    commaloc = str.indexOf(","); 
                                                                                                                              
    x =  str.substring(1, commaloc); 
   document.write("<p>valor de x: "+x); 
   y= str.substring(commaloc+1, str.length); 
                                                                                                                              
   document.write("<p>valor de y: "+y); 
} 
                                                                                                                              
</script> 
</head> 
                                                                                                                              
<body> 
<form method = "post" action="prueba.php"> 
<a href="prueba.php"><img src="laguna_padul2.JPG" ismap ></a> 
<input type=hidden name=x value=x> 
<input type=hidden name=y value=y> 
<input type=submit name=enviar value=enviar> 
                                                                                                                              
</form> 
</body> 
</html>

archivo prueba.php

Código PHP:

  <?php 
                                                                                                                              
    $x = $_GET["x"]; 
    $y = $_GET["y"]; 
                                                                                                                              
   echo "la coordenada en x vale: ".$x."\n"; 
   echo "la coordenada en y vale: ".$y."\n"; 
                                                                                                                              
                                                                                                                              
?>

espero me entiendas.

gracias

caricatos · #11 (**permalink**) 29/04/2004, 02:17

Hola otra vez:

Error (¡Horror

!) formulario con méthodo post y recepción con $_GET[...]...

Los espacios en la etiqueta form (del método) tampoco son admisibles.

Otra cosa es no hacer las asignaciones sino poner un script en la cabecera con un mal uso de document.write...

<html>
<head>
<script language="JavaScript">
/*
var x,y;
str = location.search;

if (str != "") {

commaloc = str.indexOf(",");

x = str.substring(1, commaloc);
document.write("<p>valor de x: "+x);
y= str.substring(commaloc+1, str.length);

document.write("<p>valor de y: "+y);
}
*/
var ns4 = (document.layers)? true:false
var ie4 = (document.all)? true:false
var ns6 = (document.getElementById && !document.all) ? true: false;
var coorX, coorY, iniX, iniY;

if (ns6) document.addEventListener("mousemove", mouseMove, true)
if (ns4) {document.captureEvents(Event.MOUSEMOVE); document.mousemove = mouseMove;}

function mouseMove(e)
{
if (ns4||ns6) {coorX = e.pageX; coorY = e.pageY;}
if (ie4) {coorX = event.x; coorY = event.y;}
return true;
}

function ini() {
if (ie4) document.body.onmousemove = mouseMove;
iniX = document.getElementById("recuadro").offsetLeft;
iniY = document.getElementById("recuadro").offsetTop;
}

function asignar() {
with (document.forms[0]) {
x.value = coorX;
x.value = coorX;
submit();
}
} </script>
</head>

<body onload="ini()">
<form method="get" action="prueba.php" >
<a href="prueba.php"><img src="laguna_padul2.JPG" ismap onclick="asignar()"></a>
<input type=hidden name=x value=x>
<input type=hidden name=y value=y>
<input type=submit name=enviar value=enviar>

</form>
</body>
</html>

Lo hice a ojo, o sea que puede tener errores, pero espero que vayas entendiendo.

Saludos

payo22 · #12 (**permalink**) 06/05/2004, 08:55

ya quedo caricatos gracias por toda tu ayuda.

sqa212 · #13 (**permalink**) 30/08/2005, 07:30

Tengo una pregunta sobre esta funcion

function asignar() {
with (document.forms[0]) {
x.value = coorX;
x.value = coorX;
y.value = coorY;
y.value = coorY;

//Si quito el comnetario envia el form inmediatamente al hacer click,
SI no lo quito tambien lo envia ????????
//submit();

¿como hago para evitar el envio automatico del form al hacer click?

caricatos · #14 (**permalink**) 08/09/2005, 00:29

Hola sqa212:

He mirado el código (hay cosas que me parece que no son mias), y posiblemente por estar en un tag a con un href asignado, parece que se envía el formulario, pero lo que hace (creo) es enlazar...

Supongo que poniendo onclick="return false" en el enlace se debería solucionar el problema.

Saludos