script imagen

debspain · #1 (**permalink**) 11/11/2002, 06:22

hola! a ver si alguien me puede ayudar, tengo una pagina con una imagen de fondo que está fija y no se puede repetir, ademas el color de fondo es negro, el caso es que necesito que cada vez que se haga onclick en un enlace de la pagina se cambie la imagen de fondo. HE puesto esto, no creo que tenga fallo pues el script funciona quitando el estilo del body en css y poniendo background="llongueras.jpg" en el <body> .¿Son la propiedad fixed y no-repeat el problema?. El codigo es el siguiente:

<html><head><title></title>
<style type="text/css">
BODY {background: black url(llongueras.jpg) no-repeat fixed left bottom;}
</style>
<script type="text/javascript">
function cambiarbg(bg)
{
document.body.background=bg
}
</script>
</HEAD>
<body>
<a onclick="cambiarbg('guapo2.jpg')" target="contenidos" href="biografia.html">Biografía</a>
</body>
</html>

Me podeis explicar que es lo que falla?? POr favor es algo urgente y no encuentro respuesta en ningun sitio...

Beakdan · #2 (**permalink**) 11/11/2002, 13:35

Debspain:
Bueno, el problema es que estás usando la sintaxis incorrecta.
Aunque a primera vista, parece que "document.body.background=bg" debiera funcionar, tienes tres errores.
Me parece que estás cambiando los estilos para IE, deberías acceder al objeto así

Código:

document.body.style.background

Y aquí el segundo error: la variable "bg" tiene un string que representa la imagen. Pero en tu declaración de estilo no pones esta string así nada más, sino que la pones dentro de "url()". Debes conservar esa sintaxis.

Código:

//El parametro de background es una string, así que
//concatenamos la variable para obtener el parámetro correcto
document.body.style.background = "url(" + bg + ")";

Y aunque lo anterior es sintacticamente correcto, te producirá un comportamiento no deseado, ya que background espera cambiar 5 propiedades. Al mandarle sólo uno, reseteará las demás.
Por lo tanto, debería quedar así, para mantener el estilo que definiste:

Código:

document.body.style.background: "black url('" + bg +"') no-repeat fixed left bottom";

O mejor aún sólo cambia la imagen con "backgrundImage"

Código:

document.body.style.backgroundImage = "url(" + bg + ")";

Espero que te sirva esta explicación. Saludos.

tunait · #3 (**permalink**) 11/11/2002, 13:50

Muy bueno!

estupenda explicación, Beakdan.
Lo estuve peleando hace unas horas y fuí incapaz de dar con la forma adecuada y me había quedado toda mosqueada

Gracias por una excelente respuesta

Un saludo

Helena

Beakdan · #4 (**permalink**) 11/11/2002, 15:34

Tunait:
Es un honor recibir de ti un comentario tan favorable.
Gracias, y un saludo

debspain · #5 (**permalink**) 11/11/2002, 17:06

mil gracias !!! funciona genial de las dos formas.... y tienes razon fui un poco estupida al no pensar en eso... xD pero bueno para eso es normal.. todos somos novatos al principio.. no? Lo dicho muchas gracias!!