<!DOCTYPE html>
<html lang="es">
<head>
<title>Rotar una imagen con el ratón</title>
<meta charset="utf-8">
<script>
/**
* Función que devuelve la posición [left,top] de un elemento en relación
* al documento, aunque este dentro de uno o varios position:relative
* Tiene que recibir
*/
function getPos(elem){
var tmp=elem;
var left=tmp.offsetLeft;
var top=tmp.offsetTop;
while (tmp=tmp.offsetParent) left += tmp.offsetLeft;
tmp=elem;
while(tmp=tmp.offsetParent) top+=tmp.offsetTop;
return [left,top];
}
</script>
<style>
.caja {
border:1px solid;
width:300px;
height:100px;
text-align:center;
}
.boton {
padding:10px;
background:#808080;
display:inline-block;
margin-top:10px;
cursor:pointer;
}
</style>
</head>
<body>
<h1>Posición de un elemento en relación a su contenedor y/o navegador</h1>
<p>
Pulsa sobre el botón para mostrar la posición del botón dentro de la ventana
del navegador
<div class="caja">
<div class="boton" id="boton2">Click aquí</div>
</div>
<script>
var pos2=document.getElementById("boton2");
pos2.onclick=function(){
var posleft=this.offsetLeft;
var postop=this.offsetTop;
alert("Left: "+posleft+"px - Top: "+postop+"px");
}
</script>
</p>
<p>
Pulsa sobre el botón para mostrar la posición del botón dentro del marco
(La única diferencia con el ejemplo anterior, es que este marco tiene el
estilo <b>position:relative</b>)
<div class="caja" style="position:relative">
<div class="boton" id="boton1">Click aquí</div>
</div>
<script>
var pos1=document.getElementById("boton1");
pos1.onclick=function(){
var posleft=this.offsetLeft;
var postop=this.offsetTop;
alert("Left: "+posleft+"px - Top: "+postop+"px");
}
</script>
</p>
<p>
Pulsa sobre el botón para mostrar la posición del botón dentro de la ventana
del navegador aunque el marco disponga del estilo <b>position:relative</b>
<div class="caja" style="position:relative">
<div class="boton" id="boton3">Click aquí</div>
</div>
<script>
var pos3=document.getElementById("boton3");
pos3.onclick=function(){
var pos=getPos(this);
var posleft=pos[0];
var postop=pos[1];
alert("Left: "+posleft+"px - Top: "+postop+"px");
}
</script>
</p>
<p><a href="http://www.lawebdelprogramador.com/">http://www.lawebdelprogramador.com/</p>
</body>
</html>