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.

  • es.davy.ai/
  • Programación /
  • ¿Cómo obtener una imagen aleatoria al recargar el navegador HTML? utilizando javascript, css y html.

¿Cómo obtener una imagen aleatoria al recargar el navegador HTML? utilizando javascript, css y html.

06 Jun, 2023 Programación

He revisado las respuestas sobre este tema y he intentado varias, pero todavía no funciona para mí. Me gustaría que aparezca una imagen diferente cuando recargo mi página HTML.

Por ahora, tengo este código que es bastante simple:

HTML:

CSS:

#container {
position: relative;
width: 400px;
height: 400px;
margin-left: auto;
margin-right: auto;
background-color: black;
z-index: 0;
}

.vehicule {
position: absolute;
z-index: 1;
}

JS:

var images_array_vehicule = [‘vehicule1.png’, ‘vehicule2.png’, ‘vehicule3.png’];

function getRandomImagevehicule() {

random_index_vehicule = Math.floor(Math.random() * images_array_vehicule.length);
selected_image_vehicule = images_array_vehicule[random_index_vehicule];
document.getElementById(‘image_shower_vehicule’).src =../public/layers/vehicule/${selected_image_vehicule};

}

Tengo el siguiente directorio de carpetas: https://i.stack.imgur.com/xtnML.png

¿Alguna idea que pudiera ayudarme?

El siguiente paso es hacer lo mismo con diferentes capas y superponer las imágenes seleccionadas con z-index, pero por ahora solo quiero tener una imagen aleatoria cuando recargo la página.

¡Gracias por tu ayuda!

Tags:  , , , ,

Answer

  1. Avatar for davy.ai
    davy.ai

    Para hacer que aparezca una imagen diferente cada vez que se recarga una página HTML utilizando el código proporcionado, es necesario llamar a la función getRandomImagevehicule() en la etiqueta body del archivo HTML. Así es como puedes modificar tu código para lograrlo:

    HTML:

    <!DOCTYPE html>
<html>
  <head>
    <title>Imagen aleatoria</title>
    <script type="text/javascript" src="../src/index.js"></script>
    <link rel="stylesheet" type="text/css" href="../src/index.css">
  </head>
  <body onload="getRandomImagevehicule()">
    <div id="container">
      <img id="image_shower_vehicule" class="vehicule">
    </div>
  </body>
</html>

    En el código HTML actualizado, se agrega el evento onload a la etiqueta body, el cual llama la función getRandomImagevehicule() cuando la página se carga. Además, se agrega un enlace al archivo CSS en la sección head.

    CSS:

    #container{
  position:relative;
  width:400px;
  height:400px;
  margin-left:auto;
  margin-right:auto;
  background-color:black;
  z-index:0;
}

.vehicule {
  position:absolute;
  z-index:1;
}

    El CSS permanece igual.

    JS:

    const images_array_vehicule = ['vehicule1.png','vehicule2.png','vehicule3.png'];

function getRandomImagevehicule() {
  const random_index_vehicule = Math.floor(Math.random() * images_array_vehicule.length);
  const selected_image_vehicule = images_array_vehicule[random_index_vehicule];
  document.getElementById('image_shower_vehicule').src = `../public/layers/vehicule/${selected_image_vehicule}`;
}

    En el código JS actualizado, la palabra var se reemplaza con const para declarar la variable images_array_vehicule. Además, las variables random_index_vehicule y selected_image_vehicule se declaran con const para mejorar la legibilidad del código. Finalmente, la función termina actualizando el atributo src del elemento img con una URL de imagen seleccionada al azar.

    Nota: Asegúrate de que la ruta ../public sea correcta y las imágenes se encuentren en el directorio ./public/layers/vehicule/.

    Ahora, cuando recargues la página HTML, se mostrará una imagen aleatoria del arreglo images_array_vehicule en el elemento img.

Comments are closed.