Hacer Pregunta

Conecta

entre Desarrolladores

Recibe ayuda de expertos

Registrate y pregunta

Es gratis y fácil

Recibe respuestas

Respuestas, votos y comentarios

Vota y selecciona respuestas

Recibe puntos, vota y da la solución

Pregunta

3votos

uso de url almacenada en variable con style.backgroundImage

preguntó
Software
618 Vistas
2 Respuestas
solucionada

Hola gente. Estoy dando mis primeros pasos en JavaScript y estoy trabado con esto.

Tengo un <div> donde dependiendo de un evento onclick en otro lado, se carga determinada imagen de fondo.
Mi idea fue almacenar la url en una variable de la siguiente manera:

var rutaImagen = 'imagenes/' + variable + 'X.jpg';

de esa manera, construyo perfectamente la ruta en un string y lo almaceno ahí.
El problema viene cuando lo quiero usar. Lo que probé (y no funcionó) fue esto:

document.getElementById("idDelDivTarget").style.backgroundImage = 'url(rutaImagen)';

Cual es la mejor manera o la manera correcta de hacer lo que estoy intentando?
Desde ya, muchas gracias!

por catulo (260 puntos) en Software

2 Respuestas

0voto

catulo Puntos260

Después de leer bastante encontré la solución, que pongo a continuación por si alguien anda en la misma. Muchísimas gracias por tu ayuda Leonardo-Tadei!

<body>

<h1>Hola!</h1>
<button type="button" onclick="myFunction()">Poner Fondo</button>
<script>

function myFunction() {
    var ruta = "http://zoarchurch.co.uk/content/pages/uploaded_images/91.png";
    document.body.style.backgroundColor = "#f3f3f3";
    document.body.style.backgroundImage = "url(" + ruta + ")";
}
</script>

</body>
</html>
por catulo (260 puntos)

3votos

Leonardo-Tadei Puntos227320

Hola @catulo,

la sintaxis que estás usando para poner la imagen de fondo es correcta.

Verificá las siguientes cosas que te pueden estar fallando:

  • que el DIV tenga por ID exactamente "idDelDivTarget", respetando mayúsculas y minúsculas.
  • que el URL de la imagen esté funcionando (probá esto mostrándolo por pantalla y copiando el URL en el navegador para ver que cargue la imagen).
  • que la porción de código que asigna el fondo se esté invocando (probá esto poniendo un console.log('akata'); en la línea anterior y fijate que aparezca en la consola de depurado)
  • encerrá el contenido de rutaImagen entre comillas, para que funcione con rutas con espacios o caracteres raros 
    document.getElementById("idDelDivTarget").style.backgroundImage = 'url("rutaImagen")';

Después contanos!

por Leonardo-Tadei (227.320 puntos)

0voto

catulo comentado

Hola Leonardo. Gracias por la respuesta. Todas estas cosas que me sugerís las revisé de diferentes maneras y estaban correctas. Mañana me voy a sentar un rato a hacer un análisis minucioso.
Es posible que el problema sea porque la propiedad no acepta que ponga la URL con una variable?

por catulo (260 puntos)
editado por

0voto

Leonardo-Tadei comentado

Hola @catulo,

no debería tener que ver con que el valor esté en un avariable o no, ya que para esto están las variables!

Lo que sí puede ser es que estés asumiento un reemplazo de variables que JavaScript (a diferencia de PHP) no hace en los string. Pensaba que tu código era ilustrativo y no litaral. El código para que funcione debe concatenar los valores:

document.getElementById("idDelDivTarget").style.backgroundImage = 'url("'.rutaImagen. ")';

Si esto no es, poné la porción de código en JSFiddle o similar para que la podamos analizar.

Saludos!

por Leonardo-Tadei (227.320 puntos)

0voto

catulo comentado

A ver, te paso un pequeño código simplificado de lo que quiero hacer, y que no funciona

Codigo en JSFiddle

<html>
<body>

<h1>Hola!</h1>
<button type="button" onclick="myFunction()">Poner Fondo</button>
<script>

function myFunction() {
    var ruta = "http://zoarchurch.co.uk/content/pages/uploaded_images/91.png";
    document.body.style.backgroundColor = "#f3f3f3";
    document.body.style.backgroundImage = 'url(".ruta.")';
}
</script>

</body>
</html>
por catulo (260 puntos)
editado por

Por favor, accede o regístrate para responder a esta pregunta.

Otras Preguntas y Respuestas


Sin Respuesta

Preguntas relacionadas

Actividad Reciente

Ultimas Preguntas

Preguntas relacionadas

Usuarios Top

Todos los Usuarios Usuarios Nuevos

Etiquetas

Categorías

...

Bienvenido a entre Desarrolladores, donde puedes realizar preguntas y recibir respuestas de otros miembros de la comunidad.

Etiquetas

Categorías

Conecta