Como alterar uma imagem ao passar o cursor do mouse sobre ela

Escrito por erin mcmanaway | Traduzido por weber figueiredo
Como alterar uma imagem ao passar o cursor do mouse sobre ela
Alterando uma imagem ao passar o cursor do mouse por ela (Medioimages/Photodisc/Valueline/Getty Images)

Você pode usar o efeito de mudança de imagem em sua página da internet para realçar botões, banners e imagens de menu. Quando um usuário passa o cursor do mouse sobre uma imagem, uma segunda imagem será exibida até que o cursor seja movido para outra parte da tela. Para que isso funcione, é preciso ter as duas imagens hospedadas em um servidor. Com um código javascript, é possível fazer essa mudança de imagem no evento mouse-over.

Instruções

  1. 1

    Carregue para o seu host ou serviço de hospedagem de imagem as duas imagens que serão utilizadas.

  2. 2

    Copie o endereço URL de ambas as imagens. Ele será necessário na criação do código.

  3. 3

    Selecione o código javascript abaixo, clique com o botão direito e escolha "Copiar":

    <A HREF="URL" onmouseover="document.but.src='Imagem2'" onmouseout="document.but.src='Imagem1'"> <IMG SRC="Imagem1" NAME="nome_imagem" BORDER="0" ALT="alttext"> </A>

  4. 4

    Abra o código da página em um texto ou editor online.

  5. 5

    Clique com o botão direito do mouse dentro do editor e escolha "Paste" (Colar) para colar uma cópia do código javascript.

  6. 6

    Substitua "URL" pelo endereço de URL para o qual o usuário será direcionado, caso a imagem tenha um link para outra página. Se a imagem não possuir link, remova a parte "HREF =" URL" do código.

  7. 7

    Substitua as duas ocorrências de "Imagem1" pelo endereço URL da primeira imagem. Essa é a imagem normal, visualizada pelo visitante quando ele não passar o mouse sobre ela.

  8. 8

    Substitua "Imagem2" pela URL da segunda imagem. Essa é a que será exibida quando o visitante passar o mouse sobre a primeira ("imagem1").

  9. 9

    Substitua "nome_imagem" pelo nome da imagem, que pode ser qualquer um de sua escolha.

  10. 10

    Substitua "alttext" pelo texto que será exibido quando alguém passar o mouse sobre a imagem.

  11. 11

    Salve as alterações no seu site e publique. Ao visualizar a página, você verá uma nova imagem ao passar o mouse sobre ela.

Dicas & Advertências

  • Não remova as aspas ao editar este código, caso contrário, ele não funcionará.
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