Seleccionar background image

doom12344 · #1 (**permalink**) 20/04/2012, 15:43

Hola a todos les hago una consula!!
Quiero cambiar la imagen de fondo de mi pagina web, busque y solo aparecen tutos para cambiar la imagen de un select box etc y lo que quiero es cambiar entre 2 imagenes el fondo de la web es decir el background image mediante un select box o algo similar no se si se entiende.

por ejemplo tener algo asi

Código PHP:

  
<style>
           body {
                background-image:url('imagen1.jpg');
                background-image:url('imagen2.jpg');
            }

</style>

o algo asi y seleccionarlos

Código PHP:

  

#back1{
   background-image: url(fondo1.jpg);

}
#back2{
   background-image: url(fondo2.jpg);

}
#back3{
   background-image: url(fondo3.jpg);

}

y mediante un select box o algo cambiarlas pero no logro hacerlo funcionar

Desde ya muchas gracias :)

cristian_cena · #2 (**permalink**) 20/04/2012, 16:11

Hola doom12344, debes atacar el background del elemento que deseas cambiar, en tu caso body, cuando el evento onchange del select se produzca, por ejemplo:

Código HTML:

Ver original<select id="sel">
<option value="urlDeImagen1">fondo 1</option>
<option value="urlDeImagen2">fondo 2</option>
</select>

En los value de los option colocamos las url de las imagenes que pasaras al background de body.
Luego con javascript manejas el evento:

Código Javascript:

Ver originaldocument.getElementById("sel").onchange = function(){
    document.body.style.backgroundImage = "url(" + this.value + ")";
}

En el manual de javascript de librosweb.es hay un capitulo entero dedicado a eventos. En el encontrarás la explicación de este código javascript, precisamente en el apartado "manejadores de eventos semánticos".

ejemplo funcionando

doom12344 · #3 (**permalink**) 20/04/2012, 16:15

Te agradezco mucho la respuesta cristian y mi temor era tener que usar javascript :( pero no queda otra.

cuando lo tenga hecho lo muestro para alguien que pueda necesitarlo en el futuro

Muchas gracias :)

Funciono genial el tuyo

asi es otra forma que encontre

Código PHP:

  
<html>
<header>
<style>
body    {
   background-image: url(fondo1.jpg);
}
div {
width: 25px;
height: 25px;
border: 1px solid #FFFFFF;
}
.fondo1 {
   background-image: url(fondo1.jpg);
}
.fondo2 {
   background-image: url(fondo2.jpg);
}
.fondo3 {
   background-image: url(fondo3.jpg);
}
</style>
<script>
function fondos(id){
document.body.className='fondo'+id;
}
</script>
</header>
<body>
<p>Cambiar fondos</p>
<div id="1" class ="fondo1" onclick="fondos(id)"></div>
<div id="2" class ="fondo2" onclick="fondos(id)"></div>
<div id="3" class ="fondo3" onclick="fondos(id)"></div>
</body>
</html>

por si a alguien le sirve