Foros del Web » Programando para Internet » Javascript »

[SOLUCIONADO] Cambiar background de div en css al pulsar botón

Estas en el tema de Cambiar background de div en css al pulsar botón en el foro de Javascript en Foros del Web. Hola a [email protected]! Necesito una ayudita. Tengo un formulario de subida de imágenes a mi servidor mediante php. Al subir la imagen se almacena en ...
  #1 (permalink)  
Antiguo 06/10/2013, 14:53
 
Fecha de Ingreso: diciembre-2011
Ubicación: Madrid
Mensajes: 46
Antigüedad: 7 años, 11 meses
Puntos: 1
Cambiar background de div en css al pulsar botón

Hola a [email protected]!

Necesito una ayudita.

Tengo un formulario de subida de imágenes a mi servidor mediante php.

Al subir la imagen se almacena en una carpeta llamada upload y se renombra mediante md5.

El caso es que necesito que al subir esta imagen al servidor, el background de una div se cambie automáticamente por esta imagen, y que cuando el usuario abandone la página, vuelva la imagen original.

Muchas gracias a todos de antemano.
  #2 (permalink)  
Antiguo 06/10/2013, 16:19
Avatar de javioreto  
Fecha de Ingreso: enero-2005
Ubicación: C:\España\Bilbao
Mensajes: 1.212
Antigüedad: 14 años, 9 meses
Puntos: 15
Respuesta: Cambiar background de div en css al pulsar botón

Lo que comentas es bastante sencillo. Existen dos formas tal como hagas la subida de la imagen al servidor. Si la cargas mediante ajax sin recargar la página deberás usar javascript y si al cargarla recargas la web entera al llamar a un segundo archivo php es muy sencillo.

Si pones el código fuente del formulario y del archivo de subir puedo hacerte el apaño.
  #3 (permalink)  
Antiguo 06/10/2013, 16:29
 
Fecha de Ingreso: diciembre-2011
Ubicación: Madrid
Mensajes: 46
Antigüedad: 7 años, 11 meses
Puntos: 1
Respuesta: Cambiar background de div en css al pulsar botón

Cita:
Iniciado por javioreto Ver Mensaje
Lo que comentas es bastante sencillo. Existen dos formas tal como hagas la subida de la imagen al servidor. Si la cargas mediante ajax sin recargar la página deberás usar javascript y si al cargarla recargas la web entera al llamar a un segundo archivo php es muy sencillo.

Si pones el código fuente del formulario y del archivo de subir puedo hacerte el apaño.
Hola javioreto, muchas gracias por tu rápida respuesta. La imagen la subo a una carpeta al servidor mediante php. Aquí te dejo el código fuente a ver cómo lo ves:
Código HTML:
<form action="" method="post" enctype="multipart/form-data">
			
			  <label for="file">Selecciona tu foto:</label>
			  <input type="file" name="file" id="file">
			  <input type="submit" name="submit" value="Subir">
		</form> 
Código PHP:
  <?php
 
// Upload and Rename File
 
if (isset($_POST['submit']))
{
    
$filename $_FILES["file"]["name"];
    
$file_basename substr($filename0strripos($filename'.')); // get file extention
    
$file_ext substr($filenamestrripos($filename'.')); // get file name
    
$filesize $_FILES["file"]["size"];
    
$allowed_file_types = array(".gif"".jpeg"".jpg"".png");
 
    if (
in_array($file_ext,$allowed_file_types) && ($filesize 200000))
    {    
        
// Rename file
        
$newfilename md5($file_basename) . $file_ext;
        if (
file_exists("upload/" $newfilename))
        {
            
// file already exists error
            
echo "El archivo ya existe. Por favor cambia el nombre.";
        }
        else
        {        
            
move_uploaded_file($_FILES["file"]["tmp_name"], "upload/" $newfilename);
            echo 
"Imagen subida correctamente.";
            echo 
"<a href=https://eni-lift.es/elevador-vivienda.php></a>";    
        }
    }
    elseif (empty(
$file_basename))
    {    
        
// file selection error
        
echo "Por favor selecciona un archivo.";
    } 
    elseif (
$filesize 500000)
    {    
        
// file size error
        
echo "El archivo es demasiado grande. Tamaño máximo 500kb.";
    }
    else
    {
        
// file type error
        
echo "Archivos permitidos: " implode(', ',$allowed_file_types);
        
unlink($_FILES["file"]["tmp_name"]);
    }
}
 
?>
Muchas gracias por tu ayuda!
  #4 (permalink)  
Antiguo 06/10/2013, 18:10
Avatar de caricatos
Moderador
 
Fecha de Ingreso: abril-2002
Ubicación: Torremolinos (Málaga)
Mensajes: 19.594
Antigüedad: 17 años, 7 meses
Puntos: 1277
Respuesta: Cambiar background de div en css al pulsar botón

Hola:

No sé si te vale, pero te paso un enlace: Revisar las imágenes antes de subirlas.

Saludos
__________________
Por favor:
No hagan preguntas de temas de foros en mensajes privados... no las respondo
  #5 (permalink)  
Antiguo 06/10/2013, 19:04
Avatar de javioreto  
Fecha de Ingreso: enero-2005
Ubicación: C:\España\Bilbao
Mensajes: 1.212
Antigüedad: 14 años, 9 meses
Puntos: 15
Respuesta: Cambiar background de div en css al pulsar botón

Ahora me tendrías que decir donde esta el div que debe cambiar de fondo:

la clave esta en la variable:
Código PHP:
Ver original
  1. $newfilename

Lo único que deberías hacer es pasar esa variable al archivo donde la vayas a mostrar, por ejemplo:

1. Una vez subida y estando en la pag donde te dice ok o error en la subida puedes volver a la pag anterior y le pasas la variable así:

Código PHP:
Ver original
  1. header('Location: web_anterior.php?img='.$newfilename);

2. Ahora desde la web donde se va a mostrar recoges la variable:

Código HTML:
Ver original
  1. <div style="background-image:url( <?php echo "upload/" . $_request[img]; ?>);" >
  2. div de fondo con la imagen
  3. </div>"

Si no te queda claro o no me he enterado bien de lo que quieres me comentas.
  #6 (permalink)  
Antiguo 07/10/2013, 06:10
 
Fecha de Ingreso: diciembre-2011
Ubicación: Madrid
Mensajes: 46
Antigüedad: 7 años, 11 meses
Puntos: 1
Respuesta: Cambiar background de div en css al pulsar botón

Cita:
Iniciado por javioreto Ver Mensaje
Ahora me tendrías que decir donde esta el div que debe cambiar de fondo:

la clave esta en la variable:
Código PHP:
Ver original
  1. $newfilename

Lo único que deberías hacer es pasar esa variable al archivo donde la vayas a mostrar, por ejemplo:

1. Una vez subida y estando en la pag donde te dice ok o error en la subida puedes volver a la pag anterior y le pasas la variable así:

Código PHP:
Ver original
  1. header('Location: web_anterior.php?img='.$newfilename);

2. Ahora desde la web donde se va a mostrar recoges la variable:

Código HTML:
Ver original
  1. <div style="background-image:url( <?php echo "upload/" . $_request[img]; ?>);" >
  2. div de fondo con la imagen
  3. </div>"

Si no te queda claro o no me he enterado bien de lo que quieres me comentas.
Hola javioreto. Muchas gracias.

El div que debe cambiar el fondo es el siguiente:
Código HTML:
<div style="float:left;" id="seccion-elevador">
        
        <script type="text/javascript">
        var totalSillas=0;
$("#botonSilla").click(function(){
    $("#seccion-elevador").append("<div id='silla"+totalSillas+"' class='silla'><div class='sCerrar'>X</div></div>");
    $("#silla"+totalSillas).resizable().draggable({ containment: "#seccion-elevador", scroll: false });
    totalSillas++;
    
    $(".sCerrar").click(function(){
        $(this).parent().remove();
    });
});
		</script>
       
      </div> 
Como podrás observar, el fondo está establecido en el CSS, por lo que habrá que cambiarlo ahí.

Código HTML:
#seccion-elevador {
    background: url("http://eni-lift.es/images/salon.jpg") no-repeat scroll 0 0 #FFFFFF;
    height: 500px;
    margin: 0;
    width: 700px;
	position:relative;
}
#seccion-elevador .silla {
    border: 1px dotted #000000;
    width: 100px;
    height: 290px;
    top: 20px;
    left: 220px;
    position: absolute;
    background: url("http://eni-lift.es/images/elevador.png") no-repeat scroll 0 0 transparent;
    background-size:100%;
    cursor: move;
}
#seccion-elevador .silla .sCerrar {
    float: right;
    cursor: pointer;
    font-weight:bold;
    font-size: 10px;
    padding: 3px;
}
No me queda muy claro el método que has comentado. Dónde tendría que poner el código para ir a la página anterior? En un principio quiero que todo se realice en la misma página, pero si hay otra forma más sencilla no me importa cambiarlo.

Gracias por tu ayuda.
  #7 (permalink)  
Antiguo 07/10/2013, 07:10
Avatar de javioreto  
Fecha de Ingreso: enero-2005
Ubicación: C:\España\Bilbao
Mensajes: 1.212
Antigüedad: 14 años, 9 meses
Puntos: 15
Respuesta: Cambiar background de div en css al pulsar botón

Aunque el fondo este puesto en un archivo css externo tu puedes forzar al div a tomar un nuevo valor de background:

Código HTML:
Ver original
  1. <div style="float:left;" id="seccion-elevador">
  2.        
  3.         <script type="text/javascript">
  4.         var totalSillas=0;
  5. $("#botonSilla").click(function(){
  6.     $("#seccion-elevador").append("<div id='silla"+totalSillas+"' style='background-image: url(<?php echo $_request[img]; ?>);' class='silla'><div class='sCerrar'>X</div></div>");
  7.     $("#silla"+totalSillas).resizable().draggable({ containment: "#seccion-elevador", scroll: false });
  8.     totalSillas++;
  9.    
  10.     $(".sCerrar").click(function(){
  11.         $(this).parent().remove();
  12.     });
  13. });
  14.         </script>
  15.        
  16.       </div>
  #8 (permalink)  
Antiguo 07/10/2013, 07:31
 
Fecha de Ingreso: diciembre-2011
Ubicación: Madrid
Mensajes: 46
Antigüedad: 7 años, 11 meses
Puntos: 1
Respuesta: Cambiar background de div en css al pulsar botón

Cita:
Iniciado por javioreto Ver Mensaje
Aunque el fondo este puesto en un archivo css externo tu puedes forzar al div a tomar un nuevo valor de background:

Código HTML:
Ver original
  1. <div style="float:left;" id="seccion-elevador">
  2.        
  3.         <script type="text/javascript">
  4.         var totalSillas=0;
  5. $("#botonSilla").click(function(){
  6.     $("#seccion-elevador").append("<div id='silla"+totalSillas+"' style='background-image: url(<?php echo $_request[img]; ?>);' class='silla'><div class='sCerrar'>X</div></div>");
  7.     $("#silla"+totalSillas).resizable().draggable({ containment: "#seccion-elevador", scroll: false });
  8.     totalSillas++;
  9.    
  10.     $(".sCerrar").click(function(){
  11.         $(this).parent().remove();
  12.     });
  13. });
  14.         </script>
  15.        
  16.       </div>
He hecho este cambio que me comentas, pero no funciona. La imagen se sube al servidor, pero no cambia el fondo de la div.

Por otro lado no se donde ubicar
Código PHP:
header('Location: web_anterior.php?img='.$newfilename); 
Gracias!
  #9 (permalink)  
Antiguo 08/10/2013, 10:26
 
Fecha de Ingreso: diciembre-2011
Ubicación: Madrid
Mensajes: 46
Antigüedad: 7 años, 11 meses
Puntos: 1
Respuesta: Cambiar background de div en css al pulsar botón

alguna ayuda? No consigo dar con la solución al problema. La imagen se carga en el servidor correctamente pero soy incapaz de saber cómo hacer para que se cambie por el background en el CSS al subirla, y que al abandonar la página, vuelva la imagen de prueba establecida como estandar.

Gracias por vuestra ayuda
  #10 (permalink)  
Antiguo 09/10/2013, 16:59
 
Fecha de Ingreso: diciembre-2011
Ubicación: Madrid
Mensajes: 46
Antigüedad: 7 años, 11 meses
Puntos: 1
Respuesta: Cambiar background de div en css al pulsar botón

alguien que me ayude por favor? Llevo dos días intentando con diferentes códigos pero no doy con la solución. Se agradece vuestra ayuda!

Gracias!
  #11 (permalink)  
Antiguo 09/10/2013, 17:14
Avatar de javioreto  
Fecha de Ingreso: enero-2005
Ubicación: C:\España\Bilbao
Mensajes: 1.212
Antigüedad: 14 años, 9 meses
Puntos: 15
Respuesta: Cambiar background de div en css al pulsar botón

Buenas,

El problema de todo esto es que no conozco todo el código de tu programa. Es decir, necesito tener integro el archivo donde está el div al que cambiar el background y el archivo donde esta el script de carga.

Si tienes posibilidad mete esos dos archivos php en un zip y súbelo a tu hosting. Luego pon la url para que lo pueda descargar y arreglar.
  #12 (permalink)  
Antiguo 09/10/2013, 17:32
 
Fecha de Ingreso: diciembre-2011
Ubicación: Madrid
Mensajes: 46
Antigüedad: 7 años, 11 meses
Puntos: 1
Respuesta: Cambiar background de div en css al pulsar botón

Cita:
Iniciado por javioreto Ver Mensaje
Buenas,

El problema de todo esto es que no conozco todo el código de tu programa. Es decir, necesito tener integro el archivo donde está el div al que cambiar el background y el archivo donde esta el script de carga.

Si tienes posibilidad mete esos dos archivos php en un zip y súbelo a tu hosting. Luego pon la url para que lo pueda descargar y arreglar.
Muchas gracias javioreto por contestar tan rápidamente! :) Aquí tienes el archivo.

[URL="https://www.dropbox.com/s/e93xditw52p9lj5/elevador-casa.php"]https://www.dropbox.com/s/e93xditw52p9lj5/elevador-casa.php[/URL]

Como verás está todo el código en la misma pagina php.

Los CSS que afectan a esa div son los siguientes:

Código HTML:
#seccion-elevador {
    background: url("http://eni-lift.es/images/salon.jpg") no-repeat scroll 0 0 #FFFFFF;
    height: 500px;
    margin: 0;
    width: 700px;
	position:relative;
}
#seccion-elevador .silla {
    border: 1px dotted #000000;
    width: 100px;
    height: 290px;
    top: 20px;
    left: 220px;
    position: absolute;
    background: url("http://eni-lift.es/images/elevador.png") no-repeat scroll 0 0 transparent;
    background-size:100%;
    cursor: move;
}
#seccion-elevador .silla .sCerrar {
    float: right;
    cursor: pointer;
    font-weight:bold;
    font-size: 10px;
    padding: 3px;
}
Muchas gracias por tu ayuda!
  #13 (permalink)  
Antiguo 09/10/2013, 20:18
Avatar de javioreto  
Fecha de Ingreso: enero-2005
Ubicación: C:\España\Bilbao
Mensajes: 1.212
Antigüedad: 14 años, 9 meses
Puntos: 15
Respuesta: Cambiar background de div en css al pulsar botón

Bueno, ya esta solucionado. Me debes una o al menos algún voto jeje

http://gestor.abi2burgos.es/elevador-casa.rar
  #14 (permalink)  
Antiguo 10/10/2013, 01:41
 
Fecha de Ingreso: diciembre-2011
Ubicación: Madrid
Mensajes: 46
Antigüedad: 7 años, 11 meses
Puntos: 1
Respuesta: Cambiar background de div en css al pulsar botón

Muchísimas gracias javioreto!!!! te debo lo que haga falta! y el voto por descontado! :D

Etiquetas: background, css, formulario, php, pulsar
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

SíEste tema le ha gustado a 1 personas




La zona horaria es GMT -6. Ahora son las 11:07.