0

Buenas!

Estoy elaborando una página web para un proyecto personal, y tengo dificultades cuando quiero añadir una función nueva.

La página es sencillamente una tabla con dos celdas y un div en cada una de ellas. El de la izquierda es el menu y el de la derecha la información. En el susodicho div, intento que la imagen de fondo cambie cada vez que entro, eligiendo aletoriamente entre los 10 fondos que tengo.

El HTML.

<html>
<head>
    <title>Prj</title>
    <link rel="stylesheet" href="styles.css">
</head>

<body>
<script src="scripts/rd_background.js"></script>


    <table border="0" class="master">
            <tbody>
                <td class="left">
                    <div class="dleft">
                        <table border="0" class="slave">
                                <tbody>
                                    <tr>
                                        <td><img src="images/logo-white.png" alt="PIOCAM 2018" style="width:135px;height:130px;" class="logo"></img></td>
                                    </tr>
                                    <tr>
                                        <td class="tdmenu"></td>
                                    </tr>
                                </tbody>
                            </table>
                    </div>
                </td>
                <td class="right">
                    <div class="dright" id="jsBg" >
                    <script type="text/javascript">randBg();</script>
                    </div>
                </td>
            </tbody>
        </table>

</body>

El CSS (sólo enseño el CSS con el cual JavaScript interactúa, el resto no tiene que ver con la funcionalidad.).

div.dright {
    border-radius: 8px;
    margin: 2em 2em 2em 2em;
    background: url("images/bg/3.jpg");
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    opacity: 0.5;
    height: 91vh; 
 }

Y el JavaScript.

var bgCount = 10;

function randBg() {
    var num = Math.ceil( Math.random() * bgCount );
    document.getElementById('jsBg').style.background = 'url("images/bg/"+num+".jpg")'; 
}

He analizado todo el código en base a mis conocimientos, he buscado en google y sigo sin entender el problema.

Si alguien es tan amable de decirme por qué la imagen no se cambia aleatoriamente y corregirme el fallo, se lo agradezco. Gracias de antemano.

(Update) Problema solucionado, pero no del todo.

La causa del problema residía en el código del javascript:

Antes.

'url("images/bg/"+num+".jpg")';

Después.

'url("images/bg/'+num+'.jpg")';

Un simple error de comillas. Ahora la solución ha generado un problema: la imagen no respeta background-size: cover; background-repeat: no-repeat;, ni background-position: center;. La imagen se posiciona automáticamente sin respetar esas líneas de CSS.

7
  • 1
    Hola spund3. Bienvenido a Stack Overflow en español. Por favor, lee el recorrido de bienvenida para aprender el funcionamiento básico del sitio. Has hecho logs para ver que puede estar sucediendo? Te da erroes por consola? Un saludo
    – lois6b
    el 7 sep. 2017 a las 15:22
  • @lois6b no, no me da señales de error.
    – spund3
    el 7 sep. 2017 a las 15:24
  • Que nombre tienen tus imagenes?
    – Alvarez
    el 7 sep. 2017 a las 15:36
  • enumeradas, del 1 al 10 @LuisFernando
    – spund3
    el 7 sep. 2017 a las 15:37
  • ¿Estás llamando a la función randBg() en el body onLoad() ??
    – Juan Luis
    el 7 sep. 2017 a las 15:44

3 respuestas 3

1

Dato: tiene error cuando concatenabas el nombre de la imagen, recuerda que la extension de la imagen debe ser la misma que definas alli. (todas deben ser PNG; o todas JPG , etc)

<html>
    <head>
      <title>Prj</title>
      <style type="text/css">
        div.dright {
        border-radius: 8px;
        margin: 2em 2em 2em 2em;
        background: url("img/03.jpg");
        background-size: cover;
        background-repeat: no-repeat;
        background-position: center;
        opacity: 0.5;
        height: 91vh; 
        height: 100px;
        width: 100px;
     }
      </style>
    </head>

    <body onload="randBg();">


      <table border="0" class="master">
        <tbody>
          <td class="left">
            <div class="dleft">
              <table border="0" class="slave">
                <tbody>
                  <tr>
                    <td><img src="img/bac_logo.PNG" alt="PIOCAM 2018" style="width:135px;height:130px;" class="logo"></img></td>
                  </tr>
                  <tr>
                    <td class="tdmenu"></td>
                  </tr>
                </tbody>
              </table>
            </div>
          </td>
          <td class="right">
            <div class="dright" id="jsBg" >
            </div>
          </td>
        </tbody>
      </table>

    </body>
    </html>

    <script type="text/javascript">
      var bgCount = 10;

    function randBg() {
        var num = Math.ceil( Math.random() * bgCount );
        document.getElementById('jsBg').style.background = 'url("img/'+num+'.PNG")'; 
    }
    </script>
0

Creo que es eso: Tienes que poner el script en la etiqueta head, y después en la etiqueta body, poner un onLoad = "randBg()":

<html>
<head>
    <title>Prj</title>
    <link rel="stylesheet" href="styles.css">
    <script src="scripts/rd_background.js"></script>
</head>

<body onload="randBg()"> 
    <table border="0" class="master">
            <tbody>
                <td class="left">
                    <div class="dleft">
                        <table border="0" class="slave">
                                <tbody>
                                    <tr>
                                        <td><img src="images/logo-white.png" alt="PIOCAM 2018" style="width:135px;height:130px;" class="logo"></img></td>
                                    </tr>
                                    <tr>
                                        <td class="tdmenu"></td>
                                    </tr>
                                </tbody>
                            </table>
                    </div>
                </td>
                <td class="right">
                    <div class="dright" id="jsBg" >
                    <script type="text/javascript">randBg();</script>
                    </div>
                </td>
            </tbody>
        </table>

</body>
0

Agrega en el css un width y height para el div y borra opciones de background (estan sobrando):

div.dright {
  border-radius: 8px;
  margin: 2em 2em 2em 2em;
  opacity: 0.5;
  width:91vh;
  height:91vh;
}

Borra esta linea del html:

<script type="text/javascript">randBg();</script>

Corrige la funcion randBg() tiene un problema de apostrofes y falta propiedades de imagen. Agrega la funcion randBg(); al final

function randBg() {
  var num = Math.ceil( Math.random() * bgCount );
  document.getElementById('jsBg').style.background = 'url("images/bg/'+num+'.jpg") no-repeat center';
}
//aqui invocas
randBg();
3
  • las opciones de width y height cambian lo que no deben cambiar...
    – spund3
    el 7 sep. 2017 a las 15:49
  • 1
    tambien tienes un problemas en 'url("images/bg/'+num+'.jpg")'; +num+ debe estar entre apostrofes no comillas
    – juliocpiro
    el 7 sep. 2017 a las 15:57
  • ajuste la respuesta, con algunos ajustes para la imagen. Pusiste height=91hv tambien debes poner width
    – juliocpiro
    el 7 sep. 2017 a las 16:08

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.