×
Loading ...

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

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

Alterando uma imagem ao passar o cursor do mouse por ela (Medioimages/Photodisc/Valueline/Getty Images)
  1. Carregue para o seu host ou serviço de hospedagem de imagem as duas imagens que serão utilizadas.

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

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

    alttext

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

  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. 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. 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. Substitua "Imagem2" pela URL da segunda imagem. Essa é a que será exibida quando o visitante passar o mouse sobre a primeira ("imagem1").

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

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

  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.

Loading...

Aviso

  • Não remova as aspas ao editar este código, caso contrário, ele não funcionará.

Referências

Loading ...
Loading ...