Este post demonstrará o procedimento para alterar a imagem ao passar o mouse em JavaScript.
Como alterar uma imagem ao passar o mouse em JavaScript?
Para alterar a imagem ao passar o mouse, use o botão “ ao passar o mouse ” evento. Quando o mouse/cursor é movido por um elemento HTML ou um de seus filhos, o evento onmouseover é acionado.
Exemplo 1: alterar imagem ao passar o mouse em JavaScript
Em um arquivo HTML, use a tag para mostrar a imagem em uma página da web. Anexe o “ ao passar o mouse ” que chamará a função JavaScript quando o mouse passar sobre a imagem:
< ID da imagem = 'menuImg' origem = '1.jpg' ao passar o mouse = 'passar (isso);' />
Em um arquivo JavaScript, defina uma função “ flutuar ” com o parâmetro “ img ”. Na função definida, defina a imagem que será mostrada no hover:
função flutuar ( img )
{
imagem origem = '2.jpg'
}
Como você pode ver, na saída, quando passamos o mouse sobre a imagem atual, ela muda repentinamente:
Exemplo 2: alternar a imagem ao passar o mouse
No exemplo acima, a imagem muda quando o mouse passa sobre ela, e a mesma imagem permanece. Agora, neste exemplo, a primeira imagem reaparecerá quando o mouse sair da imagem. Esse efeito é chamado de efeito de alternância. Para tanto, utilizaremos o “ ao passar o mouse ' e ' onmouseout ” Propriedades HTML:
< ID da imagem = 'menuImg' origem = '1.jpg' ao passar o mouse = 'passar (isso);' onmouseout = 'hoverOut(isto)' />
“ ao passar o mouse ” chama o “ flutuar() ” enquanto, o “ onmouseout ” evento chama a função “ hoverOut() ”:
função hoverout ( img ) {imagem origem = '1.jpg'
}
A saída mostra que a imagem é alterada com sucesso quando o mouse está sobre a imagem e é alterada quando o mouse sai da imagem:
Isso foi tudo sobre a imagem em mudança ao passar o mouse.
Conclusão
Para alterar a imagem ao passar o mouse, use o botão “ ao passar o mouse ” evento. Para efeito de alternância, use o botão “ ao passar o mouse ” atributo com “ onmouseout ” evento. Quando o mouse/cursor é movido por um elemento ou um de seus filhos, o evento onmouseover é acionado, enquanto quando o mouse/ponteiro é movido para fora de um elemento, ocorre o evento onmouseout. Neste post, demonstramos o procedimento para alterar a imagem ao passar o mouse em JavaScript.