Colocando imagem no cursor do mouse

HTML, Tutoriais | Paulo Castro | agosto 25, 2010 at 1:04 PM

Para colocar imagem no cursor do mouse copie e cole o Script a seguir dentro dos marcadores <head></head>:

<script type=“text/javascript“>
function cursor()
{
trail.style.visibility=”visible”
trail.style.position=”absolute”
trail.style.left=event.clientX-200
trail.style.top=event.clientY-25
}
</script>

Você pode modificar a distância entre a imagem e o cursor modificando o valor das
linhas, como mostra em destaque no exemplo abaixo:

trail.style.left=event.clientX-200
trail.style.top=event.clientY-25

-200 é a distância vertical que imagem deve ficar em relação ao cursor e -25 é a
distância horizontal que a imagem deve ficar em relação ao cursor.

Acrescente entre os atributos do marcador <BODY> o atributo:
onmousemove=“cursor()”.

O arquivo ficará mais ou menos assim:

E por último insira em qualquer lugar do arquivo de preferência quase no fim, antes de </BODY> a chamada para o arquivo imagem.gif, que irá seguir o cursor do mouse incansavelmente.
<IMG id=“trail” style=“VISIBILITY: hidden” src=“imagem.gif” width=“valor”
height=“valor”>

Dê preferência para imagens pequenas para se colocar no cursor. Imagens muito grandes podem tampar o conteúdo da página. Altere o valor de WIDHT e HEIGTH conforme o tamanho da imagem que vai ser usada. Cuidado ao usar este tipo de efeito para incrementar sua página porque ele pode acabar torrando a paciência do internauta que ao movimentar o cursor tem esse objeto atrapalhando ou distraindo sua atenção.

Prontinho, movimente o mouse e uma imagem estará seguindo o cursor.