Saltar al contenido

Mostrar dos cursores en una p谩gina web

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.