Como trocar imagens em javascript

Agora, crie um botão com um evento onclick redirecionando para a função chamada “SwapImages ()”:

Depois disso, especifique a fonte da imagem padrão, juntamente com seu ID e altura ajustada, respectivamente:

Agora, defina a função chamada “SwapImages ()”. Em primeiro lugar, acessará a imagem especificada usando o “documento.getElementById ()”Método. Então, aplique o “srcAtributo junto com o “corresponder()”Método para aplicar uma verificação da imagem padrão em seu argumento. Se a fonte especificada corresponder à imagem padrão, o “src”O atributo mudará seu valor para uma imagem diferente. Isso resultará na troca de ambas as imagens:

A saída correspondente será a seguinte:

Método 2: Swap Images in JavaScript usando o método Inclui () com o evento OnMouseOver

O "inclui ()”O método verifica se uma string contém uma string especificada em seu argumento e o“OnMouseOver”O evento ocorre quando o cursor é movido para o elemento especificado. Mais especificamente, essas técnicas podem ser implementadas para verificar a fonte da imagem e trocar as imagens especificadas para pairar.

Exemplo
Aqui, primeiro incluiremos o seguinte elemento de cabeçalho:

Troque as imagens

Em seguida, especifique a fonte da imagem e ajuste suas dimensões. Além disso, inclua um evento chamado “OnMouseOver”Que acessará a função chamada swapimages () com o ID especificado:

Depois disso, defina a função chamada “SwapImage ()”. Agora, repita as etapas discutidas anteriormente para acessar a imagem padrão.

Na próxima etapa, aplique o “inclui ()”Método para verificar se o“src”O atributo inclui a imagem padrão em seu argumento. Nesse caso, o atributo específico receberá um novo caminho de imagem para trocar no mouse pairar. No outro caso, a mesma imagem será recuperada em “outro" doença:

Saída

Método 3: troca de imagem lado a lado usando o atributo SRC

Neste método em particular, as duas imagens especificadas serão trocadas lado a lado acessando as imagens e equalizando -as usando o “src”Atributo.

Exemplo
Primeiro, incluiremos as imagens desejadas com seus caminhos e dimensões especificados:

Em seguida, crie um botão com um “ONCLICK”Evento invocando a função chamada swapimages () quando clicado:

Agora, declararemos uma função chamada “SwapImages ()”Que primeiro acessará as imagens por seus IDs usando o“documento.getElementById ()”Método. Então o "src”O atributo vinculará as imagens acessadas de tal maneira que o SRC da primeira imagem é igual ao segundo e, assim, as imagens são trocadas quando o botão adicionado for clicado:

Saída

Discutimos vários métodos para trocar imagens em javascript.

Conclusão

Para trocar imagens em JavaScript, utilize o “corresponder()”Método com um“ONCLICK”Evento para corresponder à imagem padrão e trocá -la com uma imagem diferente no clique do botão, o“inclui ()”Método com um“OnMouseOver”Evento para trocar a imagem padrão com a imagem especificada sobre o mouse Pair ou equalizar o“src”Atributo de ambas as imagens para trocar as imagens lado a lado. Este artigo demonstrou os métodos para trocar imagens em javascript.