Contente
- Cursores básicos do mouse
- Cursores personalizados do mouse
- Alterando o estilo do cursor com Inline Javascript
- Jogando com funções
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).
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:
Cross-hair
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:
Custom cursor
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:
Custom cursor
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.
Help
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
e ) 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:O cursor mudará nesse link
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:
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.