Cómo cambiar la fuente de imagen JavaScript
JavaScript puede integrarse con HTML para satisfacer las demandas de los usuarios. Por integración, los usuarios pueden emplear una función para cambiar la fuente de imagen. Por ejemplo, la propiedad SRC se utiliza para especificar la fuente de la imagen. Las fuentes pueden incluir un sistema de archivos local, así como la URL de la imagen. Esta guía sirve para cambiar el archivo de origen de la imagen utilizando la propiedad SRC. Todos los últimos navegadores admiten la propiedad SRC para localizar la imagen de origen.
Esta publicación sirve a los siguientes resultados de aprendizaje:
- Cómo cambiar la fuente de imagen en JavaScript
- Ejemplo 1: Cambiar la fuente de imagen de la imagen del archivo local en JavaScript
- Ejemplo 2: Cambiar la fuente de imagen de la imagen basada en la web en JavaScript
Cómo cambiar la fuente de imagen en JavaScript
JavaScript es esencial para cambiar dinámicamente la visualización de la imagen. Por ejemplo, el img El elemento HTML proporciona el SRC propiedad para modificar la fuente de la imagen. La fuente de la imagen puede ser un sistema local o cualquier imagen de URL.
La sintaxis para aplicar la propiedad SRC usando JavaScript se proporciona a continuación:
Sintaxis
documento.getElementById ("myImageId").src = "Newsurce.png ";Parámetro
La descripción de los parámetros es la siguiente:
- myimageid: especifica la identificación de la imagen.
- SRC: se refiere a la fuente de la imagen.
Ejemplo 1: Cambiar la fuente de imagen de la imagen local
Un ejemplo se adapta para cambiar la fuente de una imagen a través del archivo local en JavaScript. El ejemplo comprende archivos de código HTML y JavaScript.
código HTML
Ejemplo para cambiar la fuente de imagen en JavaScript
En este código, el SRC El atributo se utiliza para obtener la imagen "computadora.JPG". Después de eso, un "Botón Cambiar la imagen"Se agrega al archivo HTML que desencadena el ChangesCR () método. El ChangesCR () El método se escribe en un archivo JavaScript.
Código JavaScript
function ChangsCr ()documento.getElementById ("imgid").Src = "libros.jpg ";
En este código, el ChangesRC () El método obtiene el elemento usando su identificación "imgid"Y establece el valor del"SRC"Atributo de ese elemento.
Producción
La salida muestra que después de presionar el "Botón Cambiar la imagen"El archivo fuente de la imagen se cambia y se muestra la nueva imagen.
Ejemplo 2: Cambiar la fuente de imagen de una imagen basada en la web
Se emplea otro ejemplo para cambiar la fuente de la imagen a través de la URL en JavaScript. El código completo se divide en archivos HTML y JavaScript.
código HTML
Ejemplo para cambiar la fuente de imagen web en JavaScript
La descripción del código es la siguiente:
- En primer lugar, el anchura y altura de la imagen se asignan a la imagen dentro etiquetas.
- Después de eso, el Url de una imagen es proporcionada por el SRC propiedad para mostrar la imagen en la ventana del navegador.
Código JavaScript
function ChangsCr ()documento.getElementById ("imgid").src = "https: // cdn.pixabay.com/Photo/2022/07/28/33/42/Rainbow-7350780__340.jpg ";
En este código, el ChangesCR () El método se utiliza para activar un evento cuando el usuario hace clic en el botón para cambiar la fuente de la imagen.
Producción
La salida ilustra que cuando un usuario hace clic en el "Cambiar imagen", La nueva imagen se reemplaza por la existente.
Conclusión
JavaScript proporciona un SRC Atribuir para cambiar la fuente de imagen especificando la ruta del archivo. Por ejemplo, el getElementId () se utiliza el método para extraer el elemento HTML a través de id, y luego el SRC La propiedad cambiará la imagen de origen. Después de la extracción, se asigna el nuevo archivo de imagen de origen. Aquí, ha aprendido a cambiar la fuente de imagen en JavaScript. Para esto, hemos demostrado un conjunto de ejemplos en varios escenarios.