INTRODUCCION:
Para hacerlo con javascript puro haremos lo siguiente:
Crearemos una funcion para que al accionarse un evento del mouse (en este caso onmousemove) este compruebe la distancia que hay entre el mouse y el objeto
(ya definidos ambos) y en el caso de cumplirse haria la accion que deseemos.
PARAMETROS NECESARIOS:
Por lo tanto necesitariamos tres parametros:
objeto = el elemento HTML que accionara la funcion.
distancia = cantidad que deseamos entre el mouse y el objeto.
evento = el evento que accionara la comprobacion de la distancia.
METODOS Y FUNCIONES A USAR:
Ya tenemos listo los parametros, lo siguiente seria obtener los cuatro lados del objeto, esto lo haremos con offset
, el cual permite obtener la posicion en pixeles de la parte margen o limite del elemento.
Tendremos dos posibildiades offsetLeft
y offsetTop
.
Faltaria definir la parte inferior y derecha del objeto, por lo que usaremos:
width
para obtener el ancho (siendo este usando para calcular el margen derecho)
height
la altura (para calcular el punto mas bajo)
GRAFICO PARA ENTENDER MEJOR:
Pensemos antes en esta gráfica de los ejes X/Y:
100
50
-100 -50 0 50 100
-50
-100
Con la cual nos guiaremos en los cálculos para el limite del objeto.
DEFINIENDO LOS LIMITES:
IZQUIERDO:
Ahora comenzamos entonces a crear los lados del objeto:
var izquierdo= objeto.offsetLeft - distancia;
Obtenemos el valor del margen izquierdo y luego restamos la distancia para crear el limite que queremos con el objeto respecto al lado izquierdo, si lo restamos la posicion limite se correra hacia la izquierda.
SUPERIOR:
var superior= objeto.offsetTop - distancia;
Obtenemos el valor del margen superior y luego restamos la distancia para crear el limite que queremos con el objeto respecto a su altura.
DERECHO:
Ahora vayamos con los lados calculados:
Para el derecho usaremos la posición del margen izquierdo y luego sumaremos la anchura del objeto, esto daría como resultado el margen derecho, y luego sumamos la distancia que queremos de limite.
var derecho = izquierdo + objeto.witdh() + (2*distancia);
Se usa la multiplicacion, porque el limite con la distancia sin multiplicar quedaria justo en el margen del objeto.
INFERIOR:
Para el inferior usaremos la posición del margen superior y luego sumaremos la altura del objeto, esto daría como resultado el margen derecho, y luego sumamos la distancia que queremos de limite.
var inferior = superior + objeto.heigth() + (2*distancia);
Se usa la multiplicación, porque el limite con la distancia sin multiplicar quedaria justo en el margen del objeto.
LIMITES FINALES:
Quedando nuestros limites asi:
var izquierdo = objeto.offsetLeft - distancia;
var superior = objeto.offsetTop - distancia;
var derecho = izquierdo + objeto.width() + (2*distancia);
var bottom = superior + objeto.height() + (2*distancia);
POSICION DEL MOUSE:
A continuacion debemos obtener la posicion (coordenadas) del mouse tanto para el eje X como el Y.
Para esto usaremos pageX
y pageY
, los cuales reaccionaran con el evento (onmousemove)
Guardemos así:
var X= evento.pageX;
var Y= evento.pageY;
Donde evento sera:
document.onmousemove
COMPROBANDO DISTANCIA:
Veremos como comprobar la posicion del mouse en relacion al objeto y el plano cartesiano, con lo cual debe cumplirse que:
- La posicion X sea mayor que el margen izquierdo
- La posicion X sea menor que el margen derecho
- La posicion Y sea mayor que el margen superior
- La posicion Y sea menor que el margen inferior.
Ahora usaremos un return para saber si se cumple o no, de la siguiente manera:
return ( X > izquierdo && X < derecho && Y > superior && Y < inferior );
FUNCION FINAL:
function cercano( objeto, distancia, evento ) {
var izquierdo = objeto.offsetLeft - distancia;
var superior = objeto.offsetTop - distancia;
var derecho = izquierdo + objeto.width() + (2*distancia);
var inferior = superior + objeto.height() + (2*distancia);
var X = evento.pageX;
var Y = evento.pageY;
return ( X > izquierdo && X < derecho && Y > superior && Y < inferior );
};
ACCIONAR EVENTO DEL MOUSE:
Declararemos dentro de nuestro archivo JavaScript la función de calcular cuando ocurra el evento onmousemove
, quedado así:
<img id="imagen" src="http://placehold.it/200" />
<script>
document.onmousemove = function () {
var objeto = document.getElementById("imagen");
var evento = document.event;
if (cercano(objeto, 20, evento)) {
console.log("estoy Cerca");
}
}
CODIGO FINAL:
<img id="imagen" src="http://placehold.it/200" />
document.onmousemove = function () {
var objeto = document.getElementById("imagen");
var evento = document.event;
if (cercano(objeto, 20, evento)) {
console.log("estoy Cerca");
}
function cercano( objeto, distancia, evento ) {
var izquierdo = objeto.offsetLeft - distancia;
var superior = objeto.offsetTop - distancia;
var derecho = izquierdo + objeto.width + (2*distancia);
var inferior = superior + objeto.height + (2*distancia);
var X = evento.pageX;
var Y = evento.pageY;
return ( X > izquierdo && X < derecho && Y > superior && Y < inferior );
}
}
Con esto estaria listo nuestra funcion
AGREGEMOS ESTILO PARA VERLO MEJOR:
function cercano(objeto, distancia, evento) {
var izquierdo = objeto.offsetLeft - distancia;
var superior = objeto.offsetTop - distancia;
var derecho = izquierdo + objeto.width + (2*distancia);
var inferior = superior + objeto.height + (2*distancia);
var X = evento.pageX;
var Y = evento.pageY;
return (X > izquierdo && X < derecho && Y > superior && Y < inferior);
}
document.onmousemove = function () {
var objeto = document.getElementById("imagen");
var evento = window.event;
if (cercano(objeto, 30, evento)) {
alert("estoy Cerca");
}
}
<img id="imagen" src="http://placehold.it/200"/>
CREDITOS:
https://stackoverflow.com/questions/7911604/function-for-mouse-near-an-element-in-jquery