Código HTML para ações OnMouseOver em um botão

Escrito por sue smith Google | Traduzido por yaakov ben levy
  • Compartilhar
  • Tweetar
  • Compartilhar
  • Pin
  • E-mail
Código HTML para ações OnMouseOver em um botão
Paginas da Web podem detectar eventos, como por exemplo movimentos com o mouse (Comstock/Comstock/Getty Images)

As páginas da Web usam funções em JavaScript para poder aprimorar a interatividade entre os elementos, como por exemplo nos formulários. Formulários em páginas HTML podem conter inúmeros elementos de entrada, incluindo botões. Usando JavaScript, desenvolvedores Web podem colocar um nível adicional de interação do usuário com botões e outros elementos. Usos comuns com a funcionalidade "onMouseOver" envolvem a alteração da aparência do elemento quando o usuário move o mouse sobre o mesmo.

Outras pessoas estão lendo

Elemento botão

Páginas da Web podem conter elementos do tipo botão de duas formas. A tag <button> define um elemento de um formulário HTML desta forma:

<button type="button" id="meubotao">Botão de texto visível</button>

A outra opção é você usar um elemento de entrada HTML com um tipo botão, como por exemplo:

<input type="button" value="Botão de texto visível" id="meubotao" />

Ambos exemplos irão aparecer de maneira similar no navegador do usuário. Usuários podem interagir com um elemento botão através de cliques com o mouse. A marcação HTML do botão define o que irá escrito no botão, usando tanto o conteúdo indicado entre a abertura e o fechamento da tag <button> ou o valor de seu atributo indicado na abertura de sua tag.

Evento OnMouseOver

Para poder criar um efeito "OnMouseOver" em páginas da Web, você deverá instruir o navegador a "escutar" (o ato de aguardar um evento) para poder determinar quando o usuário passa o mouse por cima de um elemento HTML. O código a seguir demonstra uma adição do evento de escuta para o elemento button, especificando que uma função em JavaScript seja executada caso o evento aconteça:

<button type="button" id="meubotao" onmouseover="onButton(this.id)">Botão de texto visível</button>

O código passa o atributo do elemento como um parâmetro para a função JavaScript. O código a seguir demonstra o mesmo processo à um elemento de entrada:

<input type="button" value="Botão de texto visível" id="meubotao" onmouseover="onButton(this.id)" />

Em ambos os casos, o navegador detecta quando o usuário passa o cursor por cima do elemento, chamando a função especificada para esse caso.

Função JavaScript

Você pode definir uma função em JavaScript que será executada quando o cursor do mouse passar por cima de algo. O código a seguir altera a aparência do botão quando o usuário move o cursor por cima do mesmo:

function onButton(oBotao){ document.getElementById(oBotao).style.color="#FF0000"; }

Esse exemplo trivial altera a cor do texto do botão, mas você pode adicionar várias funcionalidades com essa função em JavaScript.

Opção OnMouseOut

Páginas que implementam um evento "OnMouseOver" também podem oferecer uma função "OnMouseOut". O evento mouseover ocorre quando o usuário move o cursor por cima do elemento a partir de uma posição externa. Já o evento mouseout ocorre quando o cursor sai de tal elemento para uma área externa. Esse último evento poderá oferecer a capacidade de restaurar a aparência do elemento quando o cursor sair de cima do objeto. O código a seguir poderá aparecer dentro do elemento, chamando a função:

onmouseout="offButton(this.id)"

Agora, o código a seguir demonstra a restauração das propriedades do elemento, o qual era originalmente da cor preta:

function offButton(oBotao){ document.getElementById(oBotao).style.color="#000000"; }

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