Este código nos vale para mostrar dos cursores, uno será una imagen “img” y otro será el “cursor real”. Obviamente solo funciona uno, y con este código el otro se mantendrá siempre a X distancia del “puntero real”.
En el ejemplo mostrará los dos cursores, pero puedes hacer que el “cursor real” no se muestre, mostrando solo la imagen.
¿Y esto para qué vale?
Pues seguramente para nada bueno, 🙂 ya que falsear la posición del ratón del usuario no le encuentro muchas relaciones lícitas. 😉
En definitiva nos puede valer para falsear la posición del puntero, para mostrarle al usuario un cursor y que realmente el cursor real se encuentre a x distancia del “cursor real”.
El codigo que necesitas, pues poco, llamar a una libreria jQuery, te vale cualquier actual, desde la 1.6.2 a la 2.1.3 que he probado hace un ratito.
Y después incluir este código en tu página.
<script>
$(document).mousemove(function(e){
$("#imageCursor").css({left:e.pageX+100, top:e.pageY});
});
</script>
<style>
#imageCursor{
position:absolute;
}
</style>
<img id="imageCursor" src="http://4.bp.blogspot.com/-tjyMxmtlItE/VcsBXWSV3AI/AAAAAAAAG-U/llAnvZtYDUY/s1600/cursor.png" width=13 height=22/> |
Para cambiar la posición de la imagen en relación a la posición del cursor real solo necesitas cambiar el valor 100 de esta linea
$(“#imageCursor”).css({left:e.pageX+100, top:e.pageY});
Por ejemplo así:
$("#imageCursor").css({left:e.pageX-100, top:e.pageY});
$("#imageCursor").css({left:e.pageX, top:e.pageY+100});
$("#imageCursor").css({left:e.pageX, top:e.pageY-100}); |
Ponerlo a vuestro gusto. En el video que os dejo a continuación podéis ver cómo queda.