Coordenadas de una imagen dentro de un documento

PMP · #1 (**permalink**) 14/12/2004, 13:15

Hola a todos:
No sé si este tema ya fue tratado, pero no lo pude encontrar.
Es posible conocer las coordenadas de una imagen, cualquiera sea su ubicación dentro del documento?

Se entiende?

Muchas gracias.

SiR.CARAJ0DIDA · #2 (**permalink**) 14/12/2004, 13:25

creo que puede ser asi:

X : document.getElementById('imagen').style.left
Y : document.getElementById('imagen').style.top

<img src="http://lala.jpg" id="imagen">

JavierB · #3 (**permalink**) 14/12/2004, 13:58

Hola PMP

Si no te funciona el código de SiR.CARAJ0DIDA, prueba con

X = document.getElementById('imagen').offsetLeft
Y = document.getElementById('imagen').offsetTop

Saludos,

PMP · #4 (**permalink**) 15/12/2004, 05:42

Antes que nada gracias por responder.
Los dos ejemplos funcionan pero no es exactamente lo que quiero.
En los ejemplos me dá las coordenadas de la imagen con respecto al objeto que la contiene.
Lo que yo necesito son las coordenadas con respecto al documento, porque las imágenes pueden estar en cualquier lugar.

En resumen lo que quiero hacer es que cuando se pase el puntero por una determinada imagen, se muestre una capa que contiene otra imagen o un archivo flash.

Espero que me entiendan.
Muchas gracias.

JavierB · #5 (**permalink**) 15/12/2004, 12:06

Hola de nuevo.

Te dejo un enlace a una página que te puede servir de ayuda:

http://kusor.net/traducciones/brainjar.es/drag2.es.html

Si sigues teniendo dudas, no dudes en volver a preguntar.

Saludos,

furoya · #6 (**permalink**) 17/12/2004, 11:33

Hola todos :

Hace poco hice algo en JScript, pero hay que pulirlo -si es que se puede-.

Conocer posición de una imagen

saludos

furoya

PMP · #7 (**permalink**) 18/12/2004, 06:15

Lo resolví con:

var Top = id_imagen.getBoundingClientRect().top + id_body.scrollTop
var Left = id_imagen.getBoundingClientRect().left + id_body.scrollLeft

Lo que no sé si esto funcionará en Nescape.

furoya · #8 (**permalink**) 27/12/2004, 11:10

Hola de nuevo :

Es evidente que el enlace que puse más arriba no contiene un código serio (me refiero al segundo que posteé). Voy a aprovechar que encontraste una manera de medir la distancia, PMP, y lo combino con la recomendación de JavierB de usar las coordenadas del puntero para hacer un ejemplo funcional y así reivindicarme.

Código:

 

<HTML><HEAD>
<SCRIPT language=JavaScript>
var equis, ye;

function posMouse(){
equis=window.event.x;
ye=window.event.y;
window.status=(equis+document.body.scrollLeft)+" "+(ye+document.body.scrollTop);
}

function posElem(){
elm=document.elementFromPoint(equis, ye);
var corr=(elm.tagName=="BODY")? 0 : 2;
var Top = elm.getBoundingClientRect().top + document.body.scrollTop-corr;
var Left = elm.getBoundingClientRect().left + document.body.scrollLeft-corr;
alert("X = "+Left+" ; Y = "+Top)
}

</SCRIPT>

<STYLE>
#alfa {
	BACKGROUND: yellow; COLOR: fuchsia; CURSOR: crosshair; FONT: bold 30px fantasy; LEFT: 400px; POSITION: absolute; TOP: 350px
}
#bravo {
	BACKGROUND: orange; COLOR: blue; CURSOR: crosshair; FONT: 30px cursive; LEFT: 500px; POSITION: absolute; TOP: 600px
}
#charly {
	BACKGROUND: lime; COLOR: red; CURSOR: crosshair
}
#delta {
	BACKGROUND: bisque; CURSOR: crosshair; MARGIN-LEFT: 10%; WIDTH:100PX
}
#eco {
	BACKGROUND: silver; CURSOR: crosshair; HEIGHT: 50px; LEFT: 1000px; POSITION: absolute; TOP: 1000px; WIDTH: 50px
}
H1 {
	COLOR: maroon; CURSOR: crosshair
}
</STYLE>

<BODY onclick=posElem() onmousemove=posMouse()>
<H2>(H2) Muestra las coordenadas de un elemento en el documento con un click.</H2>
<H1 title="H1">QWERTUERTYU IQWERTYUI QWEUIQW QWEUIQW ERTUERTYU IQWERTYUI ERTUERTYU <SPAN 
id=charly title="CHARLY" >SPAN</SPAN> QWERTYUI</H1>
<IMG id=delta 
src="http://www.forosdelweb.com/images/statusicon/forum_old.gif" title=DELTA><BR>
<DIV id=alfa title="ALFA" >DIV</DIV><BR>
<FONT id=bravo title="BRAVO" >FONT</FONT><BR>
<INPUT id=eco title="ECO" type=radio>

</BODY></HTML>

En todos los casos sigue dando esa diferencia de 2px, que no existe en el BODY.

saludos

furoya

Holden · #9 (**permalink**) 01/06/2005, 21:09

Acá terminé:
Si haces click sobre la capa te dice las coordenadas o sino haces

Coordenadas(document.getElementById("myLayer"));

Espero te sirva en ese caso me debes un whisky jejeje.

Código HTML:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Untitled Document</title>
<script language="JavaScript" type="text/JavaScript">
<!--
function Coordenadas(capa)
{

var x0 =capa.offsetLeft;
var x1 = parseInt(x0) + parseInt(capa.style.width);
var y0 = capa.offsetTop;
var y1 = parseInt(y0) + parseInt(capa.style.height);

alert("X0= "+x0+"\n X1= "+x1+"\n Y0= "+y0+"\n Y1= "+y1);


}

//-->
</script>
</head>

<body>
<div id="myLayer" style="position:absolute; left:135px; top:24px; width:297px; height:111px; z-index:1; background-color: #FF0000; layer-background-color: #FF0000; border: 1px none #000000;" onClick="Coordenadas(this)"></div>
</body>
</html>

furoya · #10 (**permalink**) 03/06/2005, 08:15

viene de Conocer coordenadas de una capa

Hola Holden :

No te debo nada. Y no lo digo por no fomentar el alcoholismo, sino porque no funciona.

El tema es principalmente que no se leen las coordenadas si el elemento no está directamente bajo el body, es decir, sin algún parent que corte la lectura de coordenadas. Este código es más o menos lo que ya se expuso y no resuelve el problema.

Para que quede más claro, dejo una versión donde se puede ver bien por qué

Código:

 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Untitled Document</title>
<style>
#myLayer{width:297px; height:111px; z-index:1; background-color: #FF0000; layer-background-color: #FF0000; border: 1px none #000000;}

#cont{position:absolute; left:135px; top:24px; }
	
</style>
<script language="JavaScript" type="text/JavaScript">
<!--
function Coordenadas(capa)
{

var x0 =capa.offsetLeft;
var x1 = parseInt(x0) + parseInt(capa.offsetWidth);
var y0 = capa.offsetTop;
var y1 = parseInt(y0) + parseInt(capa.offsetHeight);

alert("X0= "+x0+"\n X1="+x1+"\n Y0= "+y0+"\n Y1= "+y1);


}

//-->
</script>

</head>

<body>

<div id="cont" >

<div id="myLayer" onClick="Coordenadas(this)"></div>

</div>
</body>
</html>

De cualquier forma, gracias por colaborar

saludos

furoya

Holden · #11 (**permalink**) 03/06/2005, 15:29

Acà hice una funcion que calcula las distancias con respecto al eje 0,0

Código HTML:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Untitled Document</title>
<style>
#myLayer{width:297px; height:111px; z-index:1; background-color: #FF0000; layer-background-color: #FF0000; border: 1px none #000000;}

#cont{position:relative; left:135px; top:24px; }
	
body {
	margin-left: 0px;
	margin-top: 0px;
}
</style>
<script language="JavaScript" type="text/JavaScript">
<!--
function Coordenadas(obj)
{
    objOriginal = obj;
    var Yo = 0;
    var Xo = 0;
    while(obj.nodeName != "BODY")
    {
        Yo += parseInt(obj.offsetTop);
        Xo += parseInt(obj.offsetLeft);
       
        obj = obj.parentNode;
        
   }
   
	var X1 = parseInt(Xo) + parseInt(objOriginal.offsetWidth);
	var Y1 = parseInt(Yo) + parseInt(objOriginal.offsetHeight);

	alert("Xo= "+Xo+"\n X1="+X1+"\n Yo= "+Yo+"\n Y1= "+Y1);

}


//-->
</script>

</head>

<body>

<div id="cont" >

<div id="myLayer" onClick="Coordenadas(this)"></div>

</div>
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <table cellpadding="0" cellspacing="0">
        <tr>
            <td style="width: 100px">
            </td>
            <td style="width: 100px">
            </td>
            <td style="width: 100px">
                <div align="center"><img src="http://img.clarin.com/suplementos/informatica/2005/06/01/homesimple.jpg" onClick="Coordenadas(this)" /></div></td>
        </tr>
        <tr>
            <td style="width: 100px">
            </td>
            <td style="width: 100px">
            </td>
            <td style="width: 100px">
            </td>
        </tr>
        <tr>
            <td style="width: 100px">
            </td>
            <td style="width: 100px">
            </td>
            <td style="width: 100px">
            </td>
        </tr>
    </table>
    <br />
    <br />

</body>
</html>

Hay algunos factores que influyen y mucho...

1- si el layer tiene valor absoluto hay que tocar la funciòn para que calcule de otra manera. Para cualquier otro objeto (ej images) funciona bien porque usa referencias relativas.

2- El punto es que si no se setea el:
body {
margin-left: 0px;
margin-top: 0px;
}

se pierde precisiòn.

habria que buscar la vuelta para corregir esas desviaciones. voy a seguir mirandolo en mi casa sobre todo tema compatibilidad de browsers.
Saludos

furoya · #12 (**permalink**) 07/06/2005, 12:29

Eso del nodo está muy bueno. Como habrás leido, yo lo intenté con parentElement y me daba cualquier valor cuando había un center , tbody ,... pero ésto parece funcionar. Debería estudiar mejor el tema de los nodos; me leí un par de tutoriales, pero estaban explicados casi como mis mensajes en el foro, así que no entendí nada.

La verdad es que hice muchas pruebas ya hace tiempo, y me da como 'cosa' empezar a repetirlas para saber en que casos trabaja o no el escript. Si puedes hacer esas pruebas -con tiempo- para las distintas circunstancias y postearlas, seguramente el tema va a quedar más redondo.

Igual algo hice, y me llamó la atención una cosa que, o no me pasó antes, o no recordaba. Mira lo que ocurre con la posición del puntero al entrar en el objeto.

Código:

 
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Untitled Document</title>
<style>
#myLayer{width:297px; height:111px; z-index:1; background-color: #FF0000; layer-background-color: #FF0000; border: 1px none #000000;}

#cont{position:relative; left:135px; top:24px; }
	
body {
	margin-left: 10px;
	margin-top: 15px;
}
</style>
<script language="JavaScript" type="text/JavaScript">
<!--
function Coordenadas(obj)
{
    objOriginal = obj;
    var Yo = 0;
    var Xo = 0;
    while(obj.nodeName != "BODY")
    {
        Yo += parseInt(obj.offsetTop);
        Xo += parseInt(obj.offsetLeft);
       
        obj = obj.parentNode;
        alert(obj.nodeName)
   }
   
	var X1 = parseInt(Xo) + parseInt(objOriginal.offsetWidth);
	var Y1 = parseInt(Yo) + parseInt(objOriginal.offsetHeight);

	alert("Xo= "+Xo+"\n X1="+X1+"\n Yo= "+Yo+"\n Y1= "+Y1);
	//document.getElementById("punto").style.left = Xo+"px";
	//document.getElementById("punto").style.top = Yo+"px";
}

function qwert(){
status = window.event.x +" "+ window.event.y;
}
//-->
</script>

</head>

<body onmousemove=qwert()>
<center>
<div id="cont" >

<div id="myLayer" onClick="Coordenadas(this)"></div>

</div>
</center>
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <table cellpadding="0" cellspacing="0" bor der=2>
        <tr>
            <td style="width: 100px">
            </td>
            <td style="width: 100px">
            </td>
            <td style="width: 100px">
                <div al ign="center"><img height="100" src="http://img.clarin.com/suplementos/informatica/2005/06/01/homesimple.jpg" onClick="Coordenadas(this)" /></div></td>
        </tr>
        <tr>
            <td style="width: 100px">
            </td>
            <td style="width: 100px">
            </td>
            <td style="width: 100px">
            </td>
        </tr>
        <tr>
            <td style="width: 100px">
            </td>
            <td style="width: 100px">
            </td>
            <td style="width: 100px">
            </td>
        </tr>
    </table>
    <br />
    <br />
<div style="position:absolute; top:54px; left:621px; background:lime; height:30px; width:30px;" id="punto"></div>
</body>
</html>

saludos, y otra vez gracias

furoya

Holden · #13 (**permalink**) 14/10/2005, 14:36

Hey despues de tanto tiempo volvip por aca...
encontre esto que realmente calcula muy bien la posicion absoluta del elemento que le pasen.

Código:

function GetAbsPosition(el) 
{
	 var SL = 0, ST = 0;
	 var is_div = /^div$/i.test(el.tagName);  
	 if (is_div && el.scrollLeft)
		SL = el.scrollLeft;
	 if (is_div && el.scrollTop)
		ST = el.scrollTop;
	 var r = { x: el.offsetLeft - SL, y: el.offsetTop - ST };
	 if (el.offsetParent) 
	 {
		var tmp = GetAbsPosition(el.offsetParent);
		r.x += tmp.x;
		r.y += tmp.y;
	}
	return r;
}

Espero les sea tan util como a mi.
Saludos,