Como alterar o ponteiro do mouse utilizando o OnMouseOver

Escrito por jim campbell | Traduzido por fernanda lemi
  • Compartilhar
  • Tweetar
  • Compartilhar
  • Pin
  • E-mail
Como alterar o ponteiro do mouse utilizando o OnMouseOver
O evento "OnMouseOver" é desencadeado quando você passa o mouse sobre um elemento designado (computer mouse image by Edyta Anna Grabowska from Fotolia.com)

O evento "OnMouseOver" é desencadeado quando um usuário passa o ponteiro do mouse sobre um elemento de uma página. Isso pode ocorrer com qualquer elemento, como uma imagem, um botão, uma tabela ou a própria página. É possível alterar o ícone exibido ao usuário quando o ponteiro do mouse passa por cima desses elementos utilizando Javascript nas propriedades de controle. O evento "OnMouseOver" é utilizado com "OnMouseOut", o qual é desencadeado quando o ponteiro do mouse já não está mais sobre o elemento, e é utilizado para que o ícone do ponteiro volte à sua imagem original.

Outras pessoas estão lendo

Instruções

  1. 1

    Abra o arquivo HTML com seu editor de textos preferido. Role a tela até o elemento HTML que você quer editar. Pode ser qualquer elemento na página. Neste exemplo, será utilizada a etiqueta "<img>", própria para imagens em páginas.

  2. 2

    Acrescente o evento "OnMouseOver" a esse elemento. Cada elemento na página é programado com eventos internos. Isso significa que você simplesmente adicionará o texto do evento às propriedades da etiqueta para notificar o navegador que o código deve ser executado. O código a seguir é um exemplo de como adicionar o evento "OnMouseOver" à etiqueta de imagem:

    <img OnMouseOver="" src="minha_imagem.gif">

  3. 3

    Atribua o código Javascript ao evento "OnMouseOver" que altera o ponteiro do mouse. O código a seguir altera o ponteiro para uma mãozinha quando o usuário passa o mouse sobre a imagem:

    <img OnMouseOver="this.style.cursor='pointer';" src="minha_imagem.gif">

  4. 4

    Faça com que o ponteiro do mouse volte ao seu ícone original depois que ele não estiver mais sobre o elemento. Se você não configurar o evento "OnMouseOut", o mouse continuará alterado enquanto o usuário navega pela página. O código a seguir faz com que o ponteiro do mouse retorne ao padrão:

    <img OnMouseOver="this.style.cursor='pointer';" OnMouseOut="this.style.cursor='default';" src="minha_imagem.gif">

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