La idea es detectar las coordenadas de cursor en la pantalla y a partir de ahi hacer una seríe de cambios en un div.
El problema lo tengo en que no soy capaz de tomar las coordenadas en Firefox, y supuestamente ese esta linea de codigo debería de valer para todos los navegadores.
Código HTML:
var y = (document.layers)? e.pageY : event.y+document.body.scrollTop;
Código HTML:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Documento sin título</title> <script language="JavaScript"> function mouseMove(e) { //var x = (document.layers)? e.pageX : event.x+document.body.scrollLeft; var y = (document.layers)? e.pageY : event.y+document.body.scrollTop; if (y > 300 ){ y = 300; } var altura = 300 - y ; elDiv = document.getElementById("apDiv1"); valor = document.getElementById("estado"); valor.value = Math.round(altura/3); elDiv.style.left = '20px'; elDiv.style.height = altura + "px"; elDiv.style.top = y + "px"; } </script> <style type="text/css"> <!-- #apDiv1 { position:absolute; left:100px; top:0px; width:5px; height:5px; z-index:100; background-color: #FF0000; } body { margin-left: 0px; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; } .cursor { cursor: crosshair; } --> </style> </head> <body> <div id="apDiv1"><img alt="" width="1" height="1" border="0"></div> <a href="#"><img src="test.gif" width="50" height="300" border="0" class="cursor" onMouseMove="mouseMove()"/></a> <input type="text" name="estado" id="estado" disabled="disable"> <p>Mover sobre la barra de la Izquierda</p> </body> </html>