Hello biatch

P U B L I

Bitt Net

Cambiar Fondo De Un Contenedor

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
  1. <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.
  1. <script>
  2. if (localStorage['fondoBoxImagen'] == null) {
  3.   document.write('<a href="#" id="cambiar-fondo" class="mod-boton" >Cambiar Fondo</a>');
  4. }
  5. else {
  6.   document.write('<a href="#" id="restablecer-fondo" class="mod-boton" >Restablecer Fondo</a>');
  7.   }
  8. </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.
  1. <div id="mierda-toggle" style="display: none;">
  2. <script type="text/javascript">
  3. 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">');
  4. </script>
  5. </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.
  1. <script>
  2. $("#ponerImagenBox").click(function () {
  3.   var fondo = document.getElementById('imagenBoxEstablecer').value; // establece el contenido como variable
  4.   localStorage['fondoBoxImagen'] = fondo; // convierte la variable a local storage
  5.   location.reload();
  6. });
  7.  if (localStorage['fondoBoxImagen'] == null) { /* NO MODIFICAR (SI NO HAY VARIABLE, SE MOSTRARA FONDO POR DEFECTO */
  8.   /* document.write('<a href="#" id="cambiar-fondo">Cambiar Fondo</a>'); */
  9. }
  10. else
  11.   {
  12.   document.write('<style type="text/css">header { background-image: url(' + localStorage['fondoBoxImagen'] + ') ; } </style>');
  13.   }
  14.  
  15. // FIN DE LA IMAGEN DEL BOX
  16.  
  17. $("a#restablecer-fondo").click(function () { // REESTABLECER
  18.   localStorage.removeItem('fondoBoxImagen'); // BORRA IMAGEN DE FONDO
  19.   location.reload();
  20. });
  21. $("a#cambiar-fondo").click(function () { // REESTABLECER
  22.   $("#mierda-toggle").slideToggle("slow");
  23. });
  24.  
  25. </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.
=> ¿Desea una página web gratis? Pues, haz clic aquí! <=