Sustituir una imagen por otra

[biechevarria]

Hola.

Buenos dias a todos.

Tengo una pagina web http://prueba.roundrobinsport.es todo funciona OK, pero al llegar a la resolucion de 600px de ancho me encuentro con la situacion de que el footer se me descoloca y me gustaria poder poner uno adaptado a los tamaños de los distintos dispositivos moviles.

¿Como puedo sustituir la i magen que ya tengo por otra?

Saludos y muchas gracias por adelatado.

[Alexis88]

Toma al elemento <img> en el que se encuentra la imagen actual y mediante la propiedad src, establece a la nueva imagen.

Código Javascript:

var img = document.querySelector("#id del <img>");
img.src = "Ruta de la nueva imagen";
 

Un saludo

[biechevarria]

Iniciado por Alexis88

Toma al elemento <img> en el que se encuentra la imagen actual y mediante la propiedad src, establece a la nueva imagen.

Código Javascript:

var img = document.querySelector("#id del <img>");
img.src = "Ruta de la nueva imagen";
 

Un saludo

Hola Alexis.

Tu respuesta esta genial, pero como puedo adaptar eso por ejemplo a:

Si la resolucion de ancho es menor o igual a 600 que se sustituya la imagen y sino que aparezca la que tengo por defecto.

Un saludo y mil gracias.

[Alexis88]

Podrías trabajar con el evento resize para que hagas el cambio cuando varíen las dimensiones de la pantalla, pero es más recomendable y eficiente que utilices media queries.

Un saludo

[IsaBelM]

Otra opción es usar <picture> de html5 http://librosweb.es/tutorial/el-nuev...es-responsive/. esta es la compatibilidad con los navegadores