¿Cómo obtener una imagen aleatoria al recargar el navegador HTML? utilizando javascript, css y html.
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!
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:
En el código HTML actualizado, se agrega el evento
onload
a la etiqueta body, el cual llama la funcióngetRandomImagevehicule()
cuando la página se carga. Además, se agrega un enlace al archivo CSS en la sección head.CSS:
El CSS permanece igual.
JS:
En el código JS actualizado, la palabra
var
se reemplaza conconst
para declarar la variableimages_array_vehicule
. Además, las variablesrandom_index_vehicule
yselected_image_vehicule
se declaran conconst
para mejorar la legibilidad del código. Finalmente, la función termina actualizando el atributosrc
del elementoimg
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 elementoimg
.