Hola me gustaría saber si alguien me puede ayudar y me dice por que el siguiente código me funciona perfecto en Explorer, Opera, Safari y no me va en Firefox
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;
Aqui les coloco todo el código
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>
Cualquier ayuda se los agradeceré mucho