Código HTML y JavaScript para Mostrar Imágenes Aleatorias en tu Web

  En esta publicación quiero compartirles el código de HTML y Javascript para que puedan mostrar imágenes aleatorias en una pagina WEB.

Los usos que pueden darle es por ejemplo para un mensaje especial para un amigo, un detalle motivacional para su equipo de trabajo.

Para poder hacerlos vamos a utilizar el siguiente código

<html lang="es">

<head>

    <meta charset="UTF-8"></meta>

    <meta content="width=device-width, initial-scale=1.0" name="viewport"></meta>

    <title>Mensaje del día</title>

    <style>

        body {

            font-family: Arial, sans-serif;

            text-align: center;

            padding: 20px;

        }

        #randomImage {

            max-width: 100%;

            height: auto;

            margin-top: 20px;

        }

        button {

            padding: 10px 20px;

            font-size: 16px;

            cursor: pointer;

            background-color: #4CAF50;

            color: white;

            border: none;

            border-radius: 5px;

        }

        button:hover {

            background-color: #45a049;

        }

    </style>

</head>

<body>

    <h1>Mensaje del día</h1>

    <p>Pide  un mensaje para ti</p>

    <button id="randomImageButton">Obtener Imagen</button>

    <div>

        <img alt="Mensaje" id="randomImage" src="" />

    </div>

    <script>

        // Arreglo con las URLs de las imágenes en tu carpeta de Blogger

        var imageUrls = [

            'https://blogger.googleusercontent.com/Mensaje3.PNG',

            'https://blogger.googleusercontent.com/Mensaje1.PNG',

            'https://blogger.googleusercontent.com/Mensaje2.PNG',

          'https://blogger.googleusercontent.com/Mensaje4.PNG'

            // Agrega más URLs de imágenes aquí y cambian a la ruta de su servidor

        ];

        document.getElementById('randomImageButton').addEventListener('click', function() {

            // Obtener una imagen aleatoria del arreglo

            var randomIndex = Math.floor(Math.random() * imageUrls.length);

            var randomImageUrl = imageUrls[randomIndex];

            

            // Establecer la imagen aleatoria en el elemento <img>

            document.getElementById('randomImage').src = randomImageUrl;

        });

    </script>

</body>

</html>

Cómo Funciona:

1. Arreglo de URLs:

   • En el arreglo imageUrls, incluye las URLs de las imágenes que tienes almacenadas en tu carpeta de Blogger. Asegúrate de usar URLs absolutas (completas) para cada imagen.

2. JavaScript:

   • Cuando el usuario hace clic en el botón, se selecciona una URL al azar del arreglo usando Math.random() y Math.floor(), y se actualiza la imagen mostrada en el elemento <img>.

3. HTML y CSS:

• El botón permite que el usuario genere una nueva imagen aleatoria, y el estilo es simple pero efectivo para que se vea bien en cualquier dispositivo.

Les comparto la URL de una página donde utilizamos este código

https://www.lecturasbibliacatolica.com/p/mensajes-de-la-biblia-para-ti.html