Hola, q tal.
Tengo alguna manera de conocer la posicion de una imagen que tengo en mi html?
saludos
23/06/2003, 08:13
| |||
| |||
| Hola abuenog! si es en tu HTML ( por lo tanto, tienes acceso al código fuente ), y las imágenes no llevan posición absoluta ( porque así sería muy fácil ...); puedes agregar un escript. ———————— <HTML> <HEAD> <SCRIPT> <!-- function posiciones(){ var imagenes=document.all.tags('img'); for(i=0;i<imagenes.length;i++){ imagenes[i].title='X = '+imagenes[i].offsetLeft+'px \r\nY = '+imagenes[i].offsetTop+'px' ; }} window.onload=posiciones; window.onresize=posiciones; --> </SCRIPT> </HEAD> <BODY> <h2>Este texto flotante se ajusta al tamaño de la ventana y desplaza las imágenes con el "<i>resize</i>"; al cambiar las medidas de la ventana se actualizan los <tt>title</tt> de cada imagen con la nueva posición.</h2> <center> <img src="http://www.forosdelweb.com/images/a/logo_header.gif" title="un título" alt="otro"> <p><img src="http://www.forosdelweb.com/avatar.php?userid=7453&dateline=1038486522" title="un título" alt="otro"> </center> <p><b>!Nota 1 : </b>Los <tt>title</tt> y <tt>alt</tt> originales son "pisados" por el <i>script</i>.<br> <b>!Nota 2 : </b>Si las imágenes se encuentran dentro de, p.e., una tabla; las distancias se miden con respecto a ésta y no al documento.<br> </BODY> </HTML> ———————— Funciona en IE, puede que otros navegadores usen otros métodos para medir la distancia hacia arriba y/o izquierda. Si ya tienes otras funciones que usen los eventos onload u onresize, los vas a tener que pasar al <BODY> ; yo siempre los pongo ahí, pero esta vez los incluí entre las etiquetas <SCRIPT> para que pudieras copiar el código verde de una y pegarlo en tu página. Saludos furoya |
|
24/06/2003, 04:23
| ||||
| ||||
| Bueno, furoya, mi bueno ese script. Yo lo intenté en varias ocasiones y no lo conseguí. Siempre se me olvida lo de offsetTop y offsetLeft. Decirte que sí funciona en Netscape, al menos en la versión 7. De todas formas, si nuestro amigo sólo quiere conocer la posición de una imagen y no necesita nada más, a lo mejor sería mejor no poner un código tan enrevesado. Yo creo que bastaría con: y=document.getElementById("id_imagen").offsetTop; x=document.getElementById("id_imagen").offsetLeft; Y luego que utilice esas variables como quiera ¿no? Bueno, un saludo a los dos.
__________________ ¡¡NO A LA GUERRA!! Si ponemos a nuestros mensajes títulos adecuados, la gente se animará más a abrirlos y resultarán más útiles en las busquedas. ¡No a los ayuuudaaa, urgenteee y similares! |
|
02/07/2003, 03:29
| |||
| |||
| Hola, q tal. Aunque un poco tarde, quería agradeceros las respuestas. Voy a probar el codigo a ver q tal (Ya habia olvidado que puse este post. Tanto trabajo!!  ).saludos |
|
29/09/2004, 07:18
| ||||
| ||||
| Hola! Yo utilizo este codigo: Código HTML: function posiciones(){
x = document.getElementById("idImagen").offsetLeft;
y = document.getElementById("idImagen").offsetTop;
//alert(x+"-"+y);
}
window.onload=posiciones;
El problema es que si tengo la imagen dentro de una tabla me devuelve la distancia de la imagen al borde de la tabla (o eso creo) ¿Saben alguna manera de averiguar la distacia al borde de la pagina? Muchiisimas gracias! |
|
30/09/2004, 10:49
| |||
| |||
| Hola Mignola : sí, ya lo había mencionado en el código que puse más arriba. El IE 5x falsea las medidas cuando la imagen se encuentra en un elemento de bloque (agrega espacio por el borde). Un truco poco eficaz es usar parentElement detrás de parentElement e ir sumando sus distancias hasta llegar a BODY. Sé que no siempre funciona, pero no recuerdo por qué. Existe también pixelTop y pixelLeft. Habría que probar. saludos furoya |
|
11/11/2004, 15:01
| |||
| |||
| Hola otra vez : Me sentí culpable por no haber resuelto el tema de la posición de un elemento. Sigo sin recordar por qué no funciona lo del parentElement (creo que el poblema estaba en las tablas, porque el TBODY repite una distancia; pero mi memoria ya no es lo que era, así que no me hagan mucho caso). Pensando que debía haber otras opciones, una noche tuve una epifanía : en IE5.5+ se puede escanear todo el documento a pura fuerza bruta de JScript, hasta hallar el elemento buscado y luego ubicar su punto de origen. Ésto nos daría su posición en px con respecto al panel del documento; si hacemos coincidir éste con el origen de la página, tendríamos la distancia real del elemento a las coordenadas 0,0.
Código:
Habrá que tener más o menos paciencia dependiendo de la velocidad del procesador y las distancias y tamaños en la página, pero si el elemento existe, tarde o temprano lo va a encontrar.
<HTML><HEAD><TITLE>MUESTRA POSICIÓN DE UN ELEMENTO.</TITLE>
<SCRIPT>
var origX = 0;
var origY = 0;
var reubica = 0;
var identificador ="alfa"; // bravo , charly , delta
var anchoPantalla , altoPantalla , anchoElemento , altoElemento ;
function medidas(){
altoPantalla = document.body.scrollHeight ;
anchoPantalla = document.body.scrollWidth;
if(document.getElementById(identificador)){
altoElemento = document.getElementById(identificador).offsetHeight * 0.75;
anchoElemento = document.getElementById(identificador).offsetWidth * 0.75;
window.scroll(0,0);
document.body.style.cursor="wait";
barre1();}
}
function barre1(){
if (document.elementFromPoint(origX, origY).id == identificador ){
barre2();};
else {
if(origX < anchoPantalla){origX = origX*1+anchoElemento;
window.status= "X = "+origX+"px ; Y = "+origY+"px";
setTimeout("barre1()",2);}
else {
if(origY < altoPantalla){origY = origY*1+altoElemento ;
origX = 0;
setTimeout("barre1()",2);}
};
}
}
function barre2(){
if (document.elementFromPoint(origX, origY).id!= identificador ){
origX = origX*1+1;
barre3()};
else {
origX = origX*1-1;
window.status= "X = "+origX+"px ; Y = "+origY+"px";
setTimeout("barre2()",2);}
}
function barre3(){
if (document.elementFromPoint(origX, origY).id!== identificador ){
origY = origY*1+1;
document.body.style.cursor="";
reubica = 0;
document.getElementById(identificador).scrollIntoView();
alert("El elemento con ID \""+identificador+"\" está en las coordenadas\r\n\tX = "+(origX-2)+"px ; Y = "+(origY-2)+"px");
reubica = 1;
origX = 0;
origY = 0;}
else {
origY = origY*1-1;
window.status= "X = "+origX+"px ; Y = "+origY+"px";
setTimeout("barre3()",2);}
}
function reiniciaDesp(){
if(origX != 0 && origY != 0 && reubica != 0){
alert("No desplace el documento mientras se efectúa la medición.");
location.reload()};
}
function reiniciaRed(){
if(origX != 0 && origY != 0){
alert("No redimencione el documento mientras se efectúa la medición.");
location.reload()};
}
document.onmouseup = medidas;
window.onresize = reiniciaRed;
window.onscroll = reiniciaDesp;
</SCRIPT>
<STYLE>
#alfa{position:absolute; float:; top:590px; left:70px; height:200px; width:300px; background:bisque}
</STYLE>
</HEAD>
<BODY>
<h2>Muestra coordenadas de un elemento según su <tt>ID</tt>.</h2>
Click en el documento para conocer las coordenadas
del elmento con <TT>ID="<SCRIPT>document.write(identificador)</SCRIPT>
"</TT>.
<P>
<TABLE align=center border=1>
<TBODY><TR><TD bgColor=yellow>
<H1><TT id="bravo">ID = "bravo"</TT></H1>
</TD></TR></TBODY>
</TABLE><h1>1<p>.<p>.<p>2<p>.<p>.<p>3<p>.<p>.<p>4<p>.<p>.<p>5<p>.<p>.<p>
QWERTYUIOP QWERTYUIOP QWERTYUIOP <TT id="charly">ID="charly"</TT> QWERTYUIOP QWERTYUIOP
<SPAN id=alfa><BR> <H1><TT>ID="alfa"</TT></H1></SPAN>
<p>.<p>.<p>6<p>.<p>.<p>7<p>.<p>.<p>8<p>.<p>.<p>9<p>.<p>.<p><TT id="delta">ID = "delta"</TT>
</BODY></HTML>
En la barra de estado se puede ver el progreso del barrido. Hay en el código varios elementos con ID para experimentar. saludos furoya |
