Mudar o cursor do mouse é uma maneira simples de jazz a sua página web com efeitos especiais legais. Estilos cursor do mouse pode melhorar a usabilidade da sua página web , fornecendo seus usuários com feedback visual adicional , especialmente para as páginas web mais complexas com script , como jogos e mapas interativos . Javascript pode ser usado modificar o estilo do cursor do mouse , permitindo-lhe mudar o cursor do mouse com base na data de hoje, a previsão do tempo ou quase qualquer outra coisa que você pode imaginar. A técnica de usar Javascript , HTML e CSS em conjunto para criar páginas web dinâmicas é DHTML ( Dynamic HTML ) . Rato básico cursores
Existem vários cursores de mouse padrão que podem ser usados , modificando o estilo de um elemento de página ou corpo do documento. Estes estilos de cursor incluem padrão, cruz , mão, movimento , texto, wai e ajuda. Consulte " O cursor CSS propriedade " ligada na seção Recursos para obter detalhes completos sobre todos os estilos básicos de cursor. O estilo de cursor exibido quando pairando sobre um elemento pode ser definido usando CSS, como neste exemplo :
Além dos cursores básicos , cursores personalizados podem ser utilizados , definindo o estilo do cursor para o endereço de um arquivo de cursor ou imagem , como em o seguinte exemplo:
apoio navegador para cursor estilos e tipos de arquivo é inconsistente. Por exemplo , o Internet Explorer espera que arquivos de cursor com . Cur ou . Extensões ani . O Firefox não gosta cursores animados ( arquivos . ANI) , e espera um cursor básico coletados , além de cursor ou arquivo de imagem. Para obter os melhores resultados entre os navegadores , fornecer um arquivo de cursor ( . Cur ou . Ani ) , um arquivo de imagem (PNG , JPEG ou GIF) , e um tipo de cursor básica como um fallback . Este exemplo usa um cursor animado para a sua primeira opção , um arquivo de cursor simples como a segunda escolha eo cursor básico padrão como a última opção de retorno. O navegador vai tentar cada opção até encontrar um que ele pode usar.
o "Open cursor Library" ligado na seção de Recursos oferece coleções cursor do mouse livre, sem complicação Alterar o estilo do cursor . em linha com Javascript
Você pode mudar o estilo do cursor do mouse CSS com Javascript. Há vários atributos HTML relacionado com ações do mouse você pode usar para executar Javascript quando o mouse é clicado, movido ou pairava sobre um elemento de página web. Alguns desses atributos são:
onmouseover : O ponteiro do mouse passa sobre o elementonmousedown : Mouse botão pressedonmouseup : Mouse botão releasedonmouseout : O ponteiro do mouse se move fora do elementonclick : Rato botão clickedondblclick : Rato botão duplo clique
Consulte o " atributos de Eventos " link na seção de Recursos para obter evento atributos que você pode usar para adicionar ações de Javascript.
Adicione uma ação de Javascript a um evento, como um mouse -over , simplesmente definindo o valor do atributo para o código Javascript que você deseja executar . Neste exemplo, o cursor é alterado para o básico " ajuda " cursor quando o mouse passa sobre o link:
às vezes , você quer fazer mais do que se encaixa confortavelmente em um atributo de ação do mouse . Ao escrever todas as suas ações em uma função JavaScript , você pode enfiar todo o seu código na parte superior do seu documento HTML, e fazer com que o cursor mágica acontecer com uma chamada de função simples no atributo de evento . Esta função Javascript simples muda o estilo do cursor para o elemento de página web passado como parâmetro "el" :
Esta função está localizada em uma seção de script no cabeçalho do documento ( entre a
e ) , ou em um arquivo de código Javascript externo referenciado no cabeçalho da documento . Para usar esta função, chamar a função com a palavra-chave "this" de um atributo do evento em uma tag HTML. A função recebe uma referência para o elemento de página web associada ao evento mouse, e muda o seu estilo de cursor. Por exemplo, quando o ponteiro do mouse se move sobre este texto vinculado , o cursor exibido será definido pela função :
onmousemove="javascript:setElementCursor(this);" href="#"> Coloque o cursor para este link
Você também pode alterar o principal cursor exibido quando o cursor está pairando sobre o fundo da página web. Esta função Javascript que define o cursor do mouse para o corpo da página web principal com base no valor passado para a função como o parâmetro " curtype " :
Para usar esta função , chame a função com o valor de "carregamento ", " proibido ", ou "default" de um atributo do evento em uma tag HTML. Por exemplo , esta forma submeter botão chama a função para definir o cursor para " carregar" quando o botão é clicado :
não há limite para o que você pode fazer com funções Javascript . A função a seguir realiza uma contagem regressiva , alterando o cursor do mouse principal a cada segundo para a imagem do cursor associado com a contagem atual . A função setTimeOut é usado para fazer com que a função de dormir por um segundo antes de ser chamado novamente com a contagem atualizada.
