Revisé las respuestas sobre este tema y probé un montón de ellas, pero todavía no me funciona. Me gustaría que apareciera una imagen diferente cuando recargo mi página HTML.
Por ahora, tengo este código que es bastante simple:
html:
<head> <script type="text/javascript" src="../src/index.js"></script> </head> <body> <div id="container"> <img id="image_shower_vehicule" class="vehicule" /> </div> </body> </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; }J.S.:
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 me pueda ayudar?
El paso futuro es hacer lo mismo con diferentes capas y superponer las imágenes elegidas con el índice z, pero por ahora solo quiero tener una imagen aleatoria cuando recargo la página.
Gracias por tu ayuda !
Prueba esto :
función de llamada onload:
<body onload="getRandomImagevehicule()">.... </body>codigo 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}`; } #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; } <body onload="getRandomImagevehicule()"> <div id="container"> <img id="image_shower_vehicule" class="vehicule" /> </div> </body>