Sol_Eventos(II)
Anuncio
SOLUCIONES EVENTOS RATON
Crea un página con un div y a medida que mueves el raton dentro de el se visualizan las coordenadas
<html><head>
<style type="text/css">
#mousePositions{
border:solid #000000 1px;
color:#000000;
font-family:Arial, Helvetica, sans-serif;
font-size:15px;
height:200px;
overflow:auto;
width:300px;
}
</style>
<script type="application/javascript">
function position(event){
var x = event.clientX;
var y = event.clientY;
var mousePositions = document.getElementById('mousePositions');
mousePositions.innerHTML = 'X coords: '+x+', Y coords: '+y;
}
</script>
</head>
<body>
<div id="mousePositions" onmousemove="position(event);">
</div>
</body>
</html>
1
Crea una página con un enlace , cuando pulses sobre el enlace , se mostrara una capa oculta en las posición
donde has hecho clic.
<html>
<head>
<title>Mostrar un div en la posición del ratón</title>
<style type="text/css">
A:link, A:visited, A:hover, A:active{color:#0000ff;}
#flotante
{
position: absolute;
display:none;
background-color:#f1f1f1;
font-family:Arial;
font-size:0.8em;
width:220px; border:1px solid #808080;
}
</style>
<script type="text/javascript">
<!-//Funcion que muestra el div en la posicion del mouse
function showdiv(event)
{
//determina un margen de pixels del div al raton
margin=5;
var tempX = 0;
var tempY = 0;
tempX = event.pageX;
tempY = event.pageY;
if (tempX < 0){tempX = 0;}
if (tempY < 0){tempY = 0;}
//modificamos el valor del id posicion para indicar la posicion del mouse
document.getElementById('posicion').innerHTML="PosX = "+tempX+" | PosY = "+tempY;
document.getElementById('flotante').style.top = (tempY+margin);
document.getElementById('flotante').style.left = (tempX+margin);
document.getElementById('flotante').style.display='block';
}
2
-->
</script>
</head>
<body>
<h1>Mostrar un div en la posición del ratón</h1>
<p><a href='#' onclick="showdiv(event);">Pulsa para ver el div. Depende de donde pulses sobre el enlace,
se mostrara la capa.</a></p>
<div id="flotante" onmouseout="this.style.display='none'" onclick="this.style.display='none'"
onmouseover="this.style.display='block'">
<a href="#" target="_blank">Capa flotante</a>
<br /><span id="posicion"></span>
</div>
</body>
</html>
Crea una página donde un div o una imagen persigue al raton
<html>
<head>
<script type="text/javascript">
/* OJO funciona bien en IE y chrome pero no en Firefox*/
function sigueme(elEvento)
{
//Capto las coordenads del puntero.
evento = elEvento || window.event;
var x = evento.clientX ;
var y = evento.clientY;
/*
//Mejora , por si hacemos scroll en la pantalla
// Detectar si el navegador es Internet Explorer
var ie = navigator.userAgent.toLowerCase().indexOf('msie')!=-1;
if(ie) {
x = evento.clientX + document.body.scrollLeft;
y = evento.clientY + document.body.scrollTop;
}
else {
3
x= evento.pageX;
y = evento.pageY;
}
*/
//Y se las coloco al div.
document.getElementById("siguelo").style.left =15+ x + "px";
document.getElementById("siguelo").style.top =15+ y + "px";
}
</script>
</head>
<BODY onMouseMove="sigueme(event);">
<div id="siguelo" style="position: absolute; left: 100px; top: 50px;">A</div>
</BODY>
</html>
Crea una página con un div y permite arrástralo con el raton
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<style>
.estiloCuadro {
width: 10em;
border: solid red;
position: absolute;
top: 100px;
left: 30px;
cursor: pointer;
/*Deshabilitar selección de texto*/
-moz-user-select: none; /* Mozilla */
-khtml-user-select: none; /* Chrome */
-o-user-select: none; /* Opera */
}
4
</style>
<script type="text/javascript">
var xInic, yInic;
var estaPulsado = false;
function ratonPulsado(evt) {
//Obtener la posición de inicio
xInic = evt.clientX;
yInic = evt.clientY;
estaPulsado = true;
//Para Internet Explorer: Contenido no seleccionable
document.getElementById("cuadro").unselectable = true;
}
function ratonMovido(evt) {
if(estaPulsado) {
//Calcular la diferencia de posición
var xActual = evt.clientX;
var yActual = evt.clientY;
var xInc = xActual-xInic;
var yInc = yActual-yInic;
xInic = xActual;
yInic = yActual;
//Establecer la nueva posición
var elemento = document.getElementById("cuadro");
var position = getPosicion(elemento);
elemento.style.top = (position[0] + yInc) + "px";
elemento.style.left = (position[1] + xInc) + "px";
}
}
function ratonSoltado(evt) {
estaPulsado = false;
}
/*
* Función para obtener la posición en la que se encuentra el
5
* elemento indicado como parámetro.
* Retorna un array con las coordenadas x e y de la posición
*/
function getPosicion(elemento) {
var posicion = new Array(2);
if(document.defaultView && document.defaultView.getComputedStyle) {
posicion[0] = parseInt(document.defaultView.getComputedStyle(elemento,
null).getPropertyValue("top"))
posicion[1] = parseInt(document.defaultView.getComputedStyle(elemento,
null).getPropertyValue("left"));
} else {
//Para Internet Explorer
posicion[0] = parseInt(elemento.currentStyle.top);
posicion[1] = parseInt(elemento.currentStyle.left);
}
return posicion;
}
</script>
</head>
<body>
<div id="cuadro" class="estiloCuadro">Arrastra con el ratón<br>para mover este cuadro</div>
<SCRIPT type="text/javascript">
var el = document.getElementById("cuadro");
if (el.addEventListener){
el.addEventListener("mousedown", ratonPulsado, false);
el.addEventListener("mouseup", ratonSoltado, false);
document.addEventListener("mousemove", ratonMovido, false);
} else { //Para IE
el.attachEvent('onmousedown', ratonPulsado);
el.attachEvent('onmouseup', ratonSoltado);
document.attachEvent('onmousemove', ratonMovido);
6
}
</SCRIPT>
</body>
</html>
7
