Como mudar o ponteiro do mouse com Javascript

Escrito por deborah lee soltesz Google | Traduzido por josé fabián
  • Compartilhar
  • Tweetar
  • Compartilhar
  • E-mail

Alterar o cursor do mouse é uma forma simples de adicionar efeitos especiais à sua página web. Isso pode melhorar a usabilidade pois fornece aos usuários ajudas visuais adicionais, especialmente em páginas mais complexas como jogos e mapas interativos. Você pode usar Javascript para alterar o estilo do cursor de acordo com a data, a previsão do tempo e qualquer outra coisa. A técnica de usar Javascript, HTML e CSS para criar páginas web dinâmicas é conhecida como DHTML (HTML dinâmico).

Outras pessoas estão lendo

Cursores básicos do mouse

Há vários cursores padrão do mouse que podem ser usados modificando o estilo de um elemento ou o corpo da página. Os nomes são "default", "crosshair", "hand", "move", "text", "wait" e "help". Veja o link "A propriedade cursor de CSS" da seção "Recursos" para mais detalhes sobre eles. Use CSS para definir o cursor que será exibido ao passar em cima de um elemento da seguinte forma:

<a style="cursor:crosshair" href="#">Cross-hair</a>

Cursores personalizados do mouse

Além dos cursores básicos, você pode usar modelos personalizados configurando como estilo do cursor o endereço de um arquivo de imagem, como no exemplo seguinte:

<a style="cursor:url(arrow.cur), default" href="#">Custom cursor</a>

Nem todos os navegadores suportam essa característica ou todos os tipos de arquivo. Por exemplo, o Internet Explorer espera arquivos com extensão ".cur" ou ".ani". O Firefox não aceita cursores animados (".ani") e espera um cursor básico além da imagem. Para obter os melhores resultados, indique um arquivo de cursor (".cur" ou ".ani"), um arquivo de imagem (PNG, JPEG ou GIF) e um tipo de cursor básico como respaldo. O seguinte exemplo usa um cursor animado como primeira escolha, um arquivo simples no segundo lugar e o cursor básico como última opção. O navegador tentará todas as opções até encontrar uma que possa usar:

<a style="cursor:url(arrow.ani), url(arrow.cur), default" href="#">Custom cursor</a>

A "Open Cursor Library" da seção "Recursos" oferece coleções de cursores para o mouse gratuitas.

Alterando o estilo do cursor com Inline Javascript

Você pode alterar o estilo CSS do cursor usando Javascript. Há vários atributos HTML relacionados com ações do mouse que podem ser usados para executar código ao clicar, mover ou passar o mouse por cima de um elemento da página. Alguns exemplos são:

onmouseover: O ponteiro do mouse passa por cima de um elemento. onmousedown: O botão do mouse é pressionado. onmouseup: O botão do mouse é soltado. onmouseout: O ponteiro do mouse sai do elemento. ondblclick: O usuário dá duplo clique com o mouse.

No link "Event Attributes" da seção "Recursos" você encontrará mais atributos que pode usar para adicionar ações com Javascript.

Adicione uma ação a um evento (por exemplo "mouseover") definindo como valor do atributo o código que você quer executar. No exemplo abaixo, o cursor mudará para o de "ajuda" ao passar o mouse por cima do link.

<a onmouseover="this.style.cursor='help';" href="#">Help</a>

Jogando com funções

Às vezes, você desejará fazer mais do que um atributo permite. Escrevendo todas as ações em uma função do Javascript, poderá colocar todo o código na parte superior do seu documento HTML e aplicá-lo a qualquer elemento fazendo uma chamada no atributo do evento. O seguinte código altera o cursor no elemento passado como parâmetro "el":

function setElementCursor (el) { el.style.cursor = "url(3DArrow.cur), crosshair" GO }

A função estará localizada na seção script do cabeçalho do documento (entre os tags <head> e </head>) ou em um arquivo de código externo referenciado na mesma parte. Para usá-la, chame a função com a palavra-chave "this" a partir de um atributo de evento em um tag HTML. A função receberá uma referência ao elemento associado com o evento do mouse e mudará o estilo do cursor. Por exemplo, se o ponteiro passar por cima do seguinte texto, o cursor será alterado:

<a onmousemove="javascript:setElementCursor(this);" href="#">O cursor mudar&aacute; nesse link</a>

Você também pode alterar o cursor principal que será exibido ao passar o mouse por cima do fundo da página. A seguinte função permitirá mudar o cursor para o tipo indicado no parámetro "curtype":

function setMainCursor (curtype) { switch (curtype) { case "loading" : document.body.style.cursor = "url(working.ani), url(working.png), wait" ; break GO case "forbidden": document.body.style.cursor = "url(unavailable.ani), url(unavailable.png), default" ; break GO case "default": default: document.body.style.cursor = "url(arrow.cur), default" GO } }

Para usá-la, chame-a com o valor "loading", "forbidden" ou "default" a partir de um atributo de evento em um tag HTML. Por exemplo, o seguinte botão mudará o cursor para "loading" ao ser clicado:

<input type="submit" onclick="javascript:setMainCursor('loading');"/>

A linguagem Javascript possui uma funcionalidade ilimitada. O código abaixo realizará uma contagem regressiva e a cada segundo mudará o cursor do mouse para uma imagem associada ao valor atual. A função "setTimeOut" deixará a função suspensa por um segundo antes de ser chamada novamente e atualizar o contador.

function doCountdownCursor (count) { document.body.style.cursor = "url(" + count + ".ani), url(" + count + ".png), wait" GO count-- GO if (count > 0) { setTimeout ("doCountdownCursor (" + count + ")", 1000) GO } else { document.body.style.cursor = "url(arrow.cur), default" GO } }

Na página web, utilize a função para exibir a contagem no cursor do mouse ao clicar um botão em um formulário.

<input type="submit" onclick="javascript:doCountdownCursor(10);"/>

Não perca

Filtro:
  • Geral
  • Artigos
  • Slides
  • Vídeos
Mostrar:
  • Mais relevantes
  • Mais lidos
  • Mais recentes

Nenhum artigo disponível

Nenhum slide disponível

Nenhum vídeo disponível