Foros del Web » Programando para Internet » Javascript »

Cambiar imagen de fondo del css durante la carga de la web

Estas en el tema de Cambiar imagen de fondo del css durante la carga de la web en el foro de Javascript en Foros del Web. Es posible cambiar durante la carga de la web una imagen de fondo que tengo definida para un div en el css. El div del ...
  #1 (permalink)  
Antiguo 01/08/2007, 13:47
 
Fecha de Ingreso: junio-2007
Mensajes: 67
Antigüedad: 17 años, 5 meses
Puntos: 1
Pregunta Cambiar imagen de fondo del css durante la carga de la web

Es posible cambiar durante la carga de la web una imagen de fondo que tengo definida para un div en el css.

El div del contenido lleva una imagen de fondo que quiero cambiarla durante la carga de la web dependiendo de la resolución de la pantalla. He visto ejemplos para cambiar la imagen del background del body en el xhtml, y me imagino que de forma similar se podrá hacer para las propiedades del css, pero la verdad es que de javascript naa de naa, así que no consigo encontrar la forma de hacerlo

Gracias de antemano.
  #2 (permalink)  
Antiguo 01/08/2007, 16:53
 
Fecha de Ingreso: mayo-2003
Mensajes: 527
Antigüedad: 21 años, 6 meses
Puntos: 3
Re: Cambiar imagen de fondo del css durante la carga de la web

Pues supongo que si. No lo he probado, pero una posible solución sería. Lo digo por partes pero no por orden de código:

En el head, creas un script con una función que, averiguando la resolución de pantalla, te saque una imagen u otra.

Escribes la llamada a esa función nada más comenzar el body.

Te creas otra función junto a la primera que te cambie la imagen de fondo a la definitiva.

En body le pones un manejador de evento onload para que cargue esta última función cuando toda la página se haya cargado.

Si la página se carga muy rápido y quieres dar más tiempo para que se vea la primera imagen de fondo, le pones un setTimeout() a la última función con el tiempo que quieras y ya está.

No sé... es lo que se me ocurre de momento.
  #3 (permalink)  
Antiguo 02/08/2007, 12:35
 
Fecha de Ingreso: junio-2007
Mensajes: 67
Antigüedad: 17 años, 5 meses
Puntos: 1
Re: Cambiar imagen de fondo del css durante la carga de la web

Gracias Tigervlc, como decía no tengo ni idea de javascript pero a ver si sacando un poco de aquí y poco de allí consigo dar con la solución. Una pregunta, como me referiría al objeto (y a la propiedad) si por ejemplo es un div que le tengo asignada la clase "contenido".

Otra pregunta más general, me imagino que para este problema la mejor solución es utilizar javascript, porque si no es un lenguaje del lado del cliente no tengo nada que hacer ¿es cierto o hay alguna otra alternativa?.

Por cierto encontré esta web (http://www.webintenta.com/anadir-css...en-tu-web.html) que añade css dinamicamente y creo que puede ser la solución, en cuento lo pruebe, cuento que tal me fue.
  #4 (permalink)  
Antiguo 02/08/2007, 13:25
 
Fecha de Ingreso: mayo-2003
Mensajes: 527
Antigüedad: 21 años, 6 meses
Puntos: 3
Re: Cambiar imagen de fondo del css durante la carga de la web

Cita:
Iniciado por Ruyman Ver Mensaje
Gracias Tigervlc, como decía no tengo ni idea de javascript pero a ver si sacando un poco de aquí y poco de allí consigo dar con la solución. Una pregunta, como me referiría al objeto (y a la propiedad) si por ejemplo es un div que le tengo asignada la clase "contenido".

En vez de asignarlo como clase (class="contenido") usa id (id="contenido"). Class se usa para aplicar un mismo estilo a varios elementos, no a uno solo.

Para referirte al elemento de id="contenido" puedes usar:
miObjeto = document.getElementById("contenido"); // con miObjeto referencias a dicho elemento

Para obtener el valor de una propiedad (atributo) de ese elemento:
miAtributo = miObjeto.atributo
o bien
miAtributo = miObjeto.getAttribute("atributo")

Para darle valor:
miObjeto.atributo = valor
o bien
miObjeto.setAttribute("atributo", valor)

Otra pregunta más general, me imagino que para este problema la mejor solución es utilizar javascript, porque si no es un lenguaje del lado del cliente no tengo nada que hacer ¿es cierto o hay alguna otra alternativa?.

creo que sí, pero también tienes Flash.

Por cierto encontré esta web (http://www.webintenta.com/anadir-css...en-tu-web.html) que añade css dinamicamente y creo que puede ser la solución, en cuento lo pruebe, cuento que tal me fue.


la miraré yo también. Yo también tengo mucho que aprender todavía.

Un saludo.
  #5 (permalink)  
Antiguo 03/08/2007, 05:56
 
Fecha de Ingreso: junio-2007
Mensajes: 67
Antigüedad: 17 años, 5 meses
Puntos: 1
Re: Cambiar imagen de fondo del css durante la carga de la web

Muchas gracias de nuevo

El div lo tenía con un identificador, se me bailaron los términos. Usé la función que me dijiste
Código:
miObjeto = document.getElementById("contenido"); // con miObjeto referencias a dicho elemento
pero no me funcionaba al utilizarlo, probe con alert(miObjeto) y me decía HtmlDivElment o algo así por lo que estaría bien, pero si ponia alert (miObjeto.name) me salía undefined y me debería salir "contenido" ¿no?, la cosa es que no me funciono utilizándolo así, pero tal vez el error estaba en otro lado.

¿Si quiero concatenar dos variables numéricas como lo hago? ¿asignadolas primero a variables variables de texto?, lo que quiero es concatenar dos variables por ejemplo con los valores 1024 y 768, si lo hago con el + como es normal se suman, pero si las concateno junto con texto si hace lo que quiero por ejemplo fondo + 1204 + 768 + jpg.

Con el codigo del enlace que puse arriba creo que voy a poder conseguir la función que quiero ahora mismo lo tengo así:
Código:
function addCss(cssCode) {
	var styleElement = document.createElement("style");
	styleElement.type = "text/css";
	if (styleElement.styleSheet) {
	//styleElement.styleSheet.cssText = cssCode; ORIGINAL
        styleElement..styleSheet.cssText =  "#contenido{background-image: url(medios/fondo"+ screen.width + screen.height +".jpg);}"
	} else {
	//styleElement.appendChild(document.createTextNode(cssCode)); ORIGINAL
	styleElement.appendChild(document.createTextNode ("#contenido{background-image: url(medios/fondo"+ screen.width + screen.height +".jpg);}"));
	}
	document.getElementsByTagName("head")[0].appendChild(styleElement);
	}
Ahora me queda afinarlo, porque no voy a utilizar un fondo distinto para cada una de las resoluciones que hay, esta claro, y no se si tendré que tener en cuenta algunas otras cosas.
  #6 (permalink)  
Antiguo 03/08/2007, 09:32
 
Fecha de Ingreso: mayo-2003
Mensajes: 527
Antigüedad: 21 años, 6 meses
Puntos: 3
Re: Cambiar imagen de fondo del css durante la carga de la web

Hola Ruyman, estás confundiendo el atributo name con el atributo id.
El atributo name es el que se usa de forma tradicional en javascript, pero en el caso de esta línea:

miObjeto = document.getElementById("contenido")

estoy referenciando el nodo/elemento cuyo id="contenido". Con DOM se trabaja con este atributo/propiedad en vez de con name para hacer referencias, ya que id también se usa para identificar nodos en CSS, ahí llamados bloques o elementos.

Entonces, para volver a obtener "contenido", lo que tienes que hacer es:

alert(miObjeto.id) en vez de usar el atributo name

Para concatenar dos valores que previamente son numéricos puedes hacer:

num1 = 1024
num2 = 768
cadena = num1.toString() + num2.toString()
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 18:36.