Cambiar Fondo De Un Contenedor

Autor: Bitt Net
Fecha: 04/01/2013
Dificultad:

Descripcion: ...

Incluir jQuery;

Para que el código del Toggle que tenemos puesto funcione, hemos de añadir jQuery en nuestra página si no lo tenemos ya añadido

<script src="http://code.jquery.com/jquery-latest.js"></script>

El Script;

Esta primera parte del script sirve para que aparezca un link u otro, dependiendo de si hemos establecido una imagen de fondo para un contenedor específico o no.

<script>
if (localStorage['fondoBoxImagen'] == null) {
document.write('<a href="#" id="cambiar-fondo" class="mod-boton" >Cambiar Fondo</a>');
}
else {
document.write('<a href="#" id="restablecer-fondo" class="mod-boton" >Restablecer Fondo</a>');
}
</script>

Esta parte del código sirve para poner en nuestra página el campo en el que los usuarios podrán poner la imagen de fondo que desean, esta dentro de un DIV oculto, el cual se abrirá mediante jQuery con una animación.

<div id="mierda-toggle" style="display: none;">
<script type="text/javascript">
document.write('Introduzca Un Fondo Para El Contenedor: <input type="url" id="imagenBoxEstablecer" value="Introduzca Url" style="width:100px"><input type="submit" value="Establecer" id="ponerImagenBox">');
</script>
</div>

Esta ultima parte, se ha de colocar después de la partes anteriores para que funcione todo correctamente. No hemos de modificar nada, solo lo que esta destacado en rojo, y lo hemos de cambiar por el la clase CSS de el contenedor al cual le queremos cambiar el fondo.

<script>
$("#ponerImagenBox").click(function () {
var fondo = document.getElementById('imagenBoxEstablecer').value; // establece el contenido como variable
localStorage['fondoBoxImagen'] = fondo; // convierte la variable a local storage
location.reload();
});
if (localStorage['fondoBoxImagen'] == null) { /* NO MODIFICAR (SI NO HAY VARIABLE, SE MOSTRARA FONDO POR DEFECTO */
/* document.write('<a href="#" id="cambiar-fondo">Cambiar Fondo</a>'); */
}
else
{
document.write('<style type="text/css">header { background-image: url(' + localStorage['fondoBoxImagen'] + ') ; } </style>');
}
// FIN DE LA IMAGEN DEL BOX
$("a#restablecer-fondo").click(function () { // REESTABLECER
localStorage.removeItem('fondoBoxImagen'); // BORRA IMAGEN DE FONDO
location.reload();
});
$("a#cambiar-fondo").click(function () { // REESTABLECER
$("#mierda-toggle").slideToggle("slow");
});
</script>

Ejemplo;

Como Usar Esto!

Tenemos que hacer clic en el link encima de este contenedor que dice "Cambiar Fondo", entonces se nos abrirá un box para introducir la dirección de una imagen, pongamos esta imagen por ejemplo:
IMAGEN DE EJEMPLO

Cuando hayamos puesto la imagen se recargara la página y se habrá cambiado el fondo de este contenedor. A su vez, el link de "Cambiar Fondo" no estará, sino pondrá "Restablecer Fondo", si le damos pondremos el fondo por defecto de el contenedor.

P U B L I

Navegación

Bitt Net En Las Redes

Bitt Net

Cambiar Fondo De Un Contenedor

Cambiar Fondo De Un Contenedor

Incluir jQuery;

El Script;

Ejemplo;

Como Usar Esto!