Como exibir uma nova imagem em foco

Você pode usar uma imagem efeito de mudança na sua página web para acentuar seus botões, banners e imagens do menu. Quando um usuário move o mouse para passar o mouse sobre a imagem, ele será alterado para uma segunda imagem até que o usuário move o mouse para fora da imagem. Para que isso funcione, você deve ter as duas imagens hospedadas em um servidor online. então você pode usar um código javascript em seu site para fazer a mudança de imagem em um mouse-over.

  • Publique as duas imagens que você gostaria de usar para o seu host ou um serviço de hospedagem de imagem.

  • Registre o endereço URL para ambas as imagens. Você vai precisar deste ao criar o código.

  • Realce o seguinte código javascript, depois à direita, clique e escolha "Cópia" a partir do menu:

    onmouseout ="document.but.src = `Image1`"gt;

    alttext

  • Abra o seu código de página Web em um editor de texto ou online.



  • direita; clique dentro do editor e escolha "Colar" para colar uma cópia do código javascript.

  • Substituir "URL" com um endereço URL para uma página se a imagem vai ligar para um outro local. Se a imagem não link para um site que você pode remover o "href ="URL"" parte do código.

  • Substitua as duas instâncias de "image1" com o endereço URL para a primeira imagem. Esta é a imagem normal de um visitante vai ver quando não passar o mouse sobre a imagem.

  • Substituir "image2" com o endereço URL da segunda imagem. Esta será a imagem que o visitante vai ver quando passar o mouse sobre a imagem.

  • Substituir "Imagename" com o nome da imagem. Isso pode ser qualquer nome que você escolher.

  • Substituir "AltText" com texto que você gostaria de aparecer quando alguém passa o mouse sobre a imagem.

  • Salve as alterações para sua página da web e publicá-lo. Quando você visualiza sua página web, você vai ver a nova imagem que muda quando você passar o mouse sobre ele.

dicas & avisos

  • Não remova quaisquer aspas ao editar este código ou o código não vai funcionar.
De esta maneira? Compartilhar em redes sociais:

LiveInternet