knorrigt.com

Home > Internet > Cómo cambiar IMG SRC con JavaScript

Cómo cambiar IMG SRC con JavaScript

Advertisement

Cómo cambiar IMG SRC con JavaScript


Si quieres darle vida a su página web con imágenes que cambian sobre la marcha, puede utilizar JavaScript para editar el código fuente de una imagen, contenida en el atributo "src" de la etiqueta "img". A pesar de que casi cualquier acción se puede utilizar para activar el cambio de una imagen src, este tutorial demostrará cómo vincular el cambio a un botón en la página. Por ejemplo, si desea mostrar una versión más grande de una imagen en lugar de una miniatura, se podría proporcionar un botón que muestra la imagen completa cuando se hace clic.

Instrucciones

Abra el archivo .html en un editor de texto sin formato. Desplazarse hacia abajo para encontrar la imagen con la fuente que desea cambiar. En las imágenes HTML se definen por la etiqueta "<img>"; si la imagen se refirió a un archivo llamado "picture_0.jpg" en la misma carpeta que el documento HTML, la etiqueta podría decir algo como "<img src = 'picture_0.jpg'>". También podría incluir otros atributos.

Justo antes de que el atributo "src", añadir un atributo "id" para su imagen y el nombre de "change_image." La etiqueta de la imagen debe ser ahora algo como "<img 'change_image' id = src = 'picture_0.jpg'>"; si hay otros atributos de la etiqueta <img>, como una "alt" o atributo "title", añadir el atributo "id" en primer lugar.

Crear una nueva línea en el archivo HTML, directamente después de la etiqueta <img>, que une una etiqueta <span> para la función "onclick" de JavaScript. Tendrá que conocer el camino a la nueva imagen; si la imagen se llama "picture_1.jpg" y se encuentra en el mismo directorio que la primera imagen, el código sería el siguiente:

<Span style = "border: 1px solid negro" onclick = ". Document.getElementById ( 'changeImage') src = 'picture_1.jpg'"> Cambiar imagen </ span>

Guarde el documento HTML, haga doble clic en el archivo para abrirlo en el navegador web. Después de la imagen, verá un botón etiquetado "imagen del cambio". Haga clic en este icono para cambiar el archivo de origen de la imagen al valor que ya ha proporcionado en la función "onclick".

Consejos y advertencias

También puede cambiar la etiqueta <img> 's atributo src como parte de un efecto de resaltado, para que la imagen cambia cuando el ratón pasa sobre él. Para ello, cambiar la etiqueta de imagen para añadir "onMouseOver =" this.src = 'picture_1.jpg' "onmouseout =" this.src = 'picture_0.jpg' "" antes de que el "atributo src". Este código se carga "picture_1.jpg" cuando la imagen se desplaza el ratón sobre, y cambiarlo de nuevo a "picture_0.jpg" cuando el ratón sale del área.

Cómo cambiar texto HTML con variables de JavaScript
JavaScript es un lenguaje de script del lado del cliente que utiliza variables que se comportan de la misma manera que las variables se comportan en otros lenguajes de programación. las variables JavaScript no necesitan ser declaradas antes de usarlo
Cómo establecer Estilos CSS con JavaScript
Definición de estilos CSS con JavaScript es una manera sencilla y eficaz para hacer una página web más dinámica y estimulante para los visitantes. Usted no necesita tener un amplio conocimiento de programación para alterar CSS con JavaScript, ya que
Rotación de una imagen en una página web con Javascript es relativamente fácil. Es necesario estar familiarizado con el lenguaje HTML, para que sepa lo que está viendo cuando se edita el código de la página web para girar la imagen, pero si se utiliz
Las cuentas de usuario permiten que más de una persona para compartir el mismo equipo. Cada cuenta puede tener un tema de escritorio diferente, programas de medios por defecto u otras opciones personales. Puede cambiar de usuario con Windows Vista si
Cómo cambiar su IP con CMD
software de Microsoft Windows tiene una variedad de herramientas para la gestión de redes en el equipo. Independientemente de si usted tiene Windows XP, Vista o 7, el equipo puede conectarse a ambas redes cableadas e inalámbricas. Aunque la mayoría d
Cómo crear una calculadora con Javascript
JavaScript es un lenguaje de programación utilizado para desarrollar aplicaciones web. El uso de JavaScript, puede crear una calculadora sencilla para poner en su sitio web o en el escritorio, abra el archivo local en su navegador web compatible con
Cómo cambiar un puntero con ONMOUSEOVER
El evento "Onmouseover" se activa cuando un usuario pasa el puntero del ratón sobre un elemento de la página web. El evento puede ser activado en cualquier elemento página web, tal como una imagen, un botón, una mesa o incluso la propia página.
Cómo cambiar Zona Ancho Con SharePoint
El propósito de una zona de elementos web es servir como receptáculo para elementos Web. Los elementos Web son controles de servidor que permiten a los usuarios manipular la apariencia, contenido y rendimiento de una página de SharePoint directamente
JavaScript es un lenguaje de programación popular que le permite añadir interactividad y efectos dinámicos a una página Web. No sólo se puede utilizar para crear efectos divertidos como la animación de texto y juegos simples, puede utilizarlo para ha
FRAPS está diseñado para capturar lo que está en la pantalla, si es el escritorio de Windows o un juego que está jugando, y lo guarda como un archivo de vídeo o captura de pantalla. La resolución del vídeo o pantalla depende en general de la resoluci
Cómo imprimir un mensaje con Javascript
JavaScript es un lenguaje de programación web que se utiliza para proporcionar la funcionalidad del lado del cliente como los mensajes de validación de la forma y de los usuarios. Hay muchas maneras en las que JavaScript puede ayudarle con el desarro
Un botón de Facebook "Compartir" en su sitio web permite a los usuarios compartir sus páginas con sus amigos de Facebook. Facebook le proporciona el código para agregar el botón a las páginas Web, por lo que no es necesario para crear cualquier
Cómo cambiar su voz con Ventrilo
los propietarios de software de Ventrilo tienen la capacidad de utilizar su software para hablar con otros clientes Ventrilo a través de un micrófono y altavoces en línea. Algunos usos populares para este tipo de servicio de voz incluyen los videojue
Los métodos "scrollTo" y "scrollBy" de JavaScript le permiten desplazarse a una página Web mediante programación. Al hacer referencia a su camino ascendente en el árbol DOM, puede acceder a otros marcos de código JavaScript dentro de u
Cómo quitar un elemento con JavaScript
funciones de JavaScript pueden añadir y eliminar elementos en una página web. Los elementos HTML dentro de una página Web se organizan en una estructura de "árbol", que se puede acceder a las funciones de JavaScript que operan dentro de la págin
Cómo cambiar la hibernación con el portátil cerrado
Tener su ordenador portátil inesperadamente cerrada durante alguna tarea o una conversación importante puede conducir a la frustración grave. Lo que es peor, cualquier actividad de red que requiere la actividad se verá comprometida debido a la pérdid
Cómo cambiar una pantalla con OpenSUSE
OpenSUSE es un sistema operativo de código abierto construido sobre un núcleo de Linux. Como la mayoría de otras distribuciones de Linux, OpenSUSE se puede descargar de forma gratuita o comprado como un paquete al por menor que incluye soporte de usu
Visual Basic para Aplicaciones, o VBA para abreviar, es un lenguaje de programación desarrollado por Microsoft que está integrado en el software de Office para permitir a los usuarios automatizar diversas funciones. Una capacidad del lenguaje es el d
Cómo cambiar su módem con Comcast
Si se suscribe a un servicio de Internet por cable Comcast, que probablemente está arrendando un módem de Comcast por unos $ 3 al mes. Si se quiere evitar que la cuota de alquiler mensual de su cuenta de cable, se podía comprar su propio módem de cab