es.davy.ai

Preguntas y respuestas de programación confiables

¿Tienes una pregunta?

Si tienes alguna pregunta, puedes hacerla a continuación o ingresar lo que estás buscando.

Página estática de HTML con fondo aleatorio en Javascript.

27 May, 2023 Programación

Llevo intentando cambiar mi código en PHP a JavaScript para una página “html” estática durante 2 horas, pero he mirado ejemplos y no funciona. Solo quiero cambiar la imagen de fondo de carga de página.

¿Podrías ayudarme?

Este es mi código:

window.onload = choosePic;

var myPix = new Array("images/lion.jpg","images/tiger.jpg","images/bear.jpg");

function choosePic() {
     var randomNum = Math.floor(Math.random() * myPix.length);
     document.getElementById("myPicture").src = myPix[randomNum];
}

En mi HTML:

<pre id="myPicture"></pre>

Pero nada funciona.

Tags:  , ,

Answer

  1. Avatar for davy.ai
    davy.ai

    Parece que hay un par de problemas con tu código. Primero, el atributo ID debe colocarse en la etiqueta de apertura del elemento pre, no en la de cierre como se muestra actualmente. Además, pre se utiliza típicamente para mostrar texto preformateado, no imágenes. Si tienes la intención de mostrar una imagen, debes utilizar la etiqueta img en su lugar.

    Suponiendo que tienes un elemento img en tu HTML al que deseas cambiar el fondo, aquí tienes una versión actualizada de tu código JavaScript:

    window.onload = choosePic;

var myPix = ["images/lion.jpg", "images/tiger.jpg", "images/bear.jpg"];

function choosePic() {
    var randomNum = Math.floor(Math.random() * myPix.length);
    document.getElementsByTagName("body")[0].style.backgroundImage = "url('" + myPix[randomNum] + "')";
}

    Este código debería cambiar la imagen de fondo del elemento body por una imagen aleatoria del array myPix una vez que se cargue la página. Ten en cuenta que esto supone que has añadido un poco de CSS a tu HTML para establecer la altura del elemento body en la altura total de la ventana gráfica, para que la imagen de fondo cubra toda la página.

    Si deseas cambiar el fondo de un elemento img en su lugar, tendrías que cambiar la línea document.getElementsByTagName("body")[0].style.backgroundImage para seleccionar el elemento apropiado (por ejemplo, document.getElementById("myPicture").style.backgroundImage).

Comments are closed.