Cómo intercambiar imágenes en JavaScript

Ahora, cree un botón con una redireccionamiento de evento en OnClick a la función llamada "Swapimages ()":

Después de eso, especifique la fuente de la imagen predeterminada junto con su ID y su altura ajustada respectivamente:

Ahora, defina la función llamada "Swapimages ()". En primer lugar, accederá a la imagen especificada utilizando el "documento.getElementById ()" método. Luego, aplique el "SRC"Atributo junto con el"fósforo()Método para aplicar una verificación de la imagen predeterminada en su argumento. Si la fuente especificada coincide con la imagen predeterminada, el "SRC"El atributo cambiará su valor a una imagen diferente. Esto dará como resultado el intercambio de ambas imágenes:

La salida correspondiente será la siguiente:

Método 2: Imágenes de intercambio en JavaScript usando el método INCLUSE () con el evento OnMouseOver

El "Incluye ()"Verifica el método si una cadena contiene una cadena especificada en su argumento y el"el ratón por encimaEl evento ocurre cuando el cursor se mueve al elemento especificado. Más específicamente, estas técnicas se pueden implementar para verificar la fuente de la imagen e intercambiar las imágenes especificadas en flotar.

Ejemplo
Aquí, primero incluiremos el siguiente elemento de encabezado:

Intercambiar las imágenes

A continuación, especifique la fuente de la imagen y ajuste sus dimensiones. Además, incluya un evento llamado "el ratón por encimaQue accederá a la función nombrada SwapImages () con la ID especificada:

Después de eso, defina la función llamada "swapimage ()". Ahora, repita los pasos discutidos anteriormente para acceder a la imagen predeterminada.

En el siguiente paso, aplique el "Incluye ()"Método para verificar si el"SRC"El atributo incluye la imagen predeterminada en su argumento. Si es así, al atributo particular se le asignará una nueva ruta de imagen para intercambiar el mouse. En el otro caso, se recuperará la misma imagen en "demás" condición:

Producción

Método 3: intercambio de imágenes lado a lado usando el atributo SRC

En este método en particular, las dos imágenes especificadas se intercambiarán de lado a lado accionando las imágenes y igualándolas utilizando el "SRC" atributo.

Ejemplo
Primero, incluiremos las imágenes deseadas con sus rutas y dimensiones especificadas:

A continuación, cree un botón con un "al hacer clic"Evento invoca la función llamada SwapImages () cuando se hace clic:

Ahora, declararemos una función llamada "Swapimages ()"Que primero accederá a las imágenes por sus ID utilizando el"documento.getElementById ()" método. Entonces el "SRC"El atributo vinculará las imágenes accedidas de tal manera que el SRC de la primera imagen es igual a la segunda, y por lo tanto se intercambian las imágenes cuando se hace clic en el botón agregado:

Producción

Hemos discutido varios métodos para intercambiar imágenes en JavaScript.

Conclusión

Para intercambiar imágenes en JavaScript, utilice el "fósforo()"Método con un"al hacer clic"Evento para que coincida con la imagen predeterminada y cambiarla con una imagen diferente en el clic del botón, el" "Incluye ()"Método con un"el ratón por encima"Evento para intercambiar la imagen predeterminada con la imagen especificada en el mouse flotante o igualar el"SRC"Atributo de ambas imágenes para intercambiar las imágenes una al lado de. Este artículo demostró los métodos para intercambiar imágenes en JavaScript.