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



Comentarios

Publicar un comentario

Entradas más populares de este blog

Ejemplo Macro en Word

Imagen
Hola: ¿Sabían que no solo en Excel pueden hacer Macros?  ¡¡¡También en Outlook, Word, Power Point,Access  es posible hacer Macros!!!  ☺️ Ya que Word, Excel, Power Point,Access son de familia Microsoft y Visual Basic también es que podemos programar nuestras macros en esta paquetería. Como hemos visto antes, para poder programar nuestras macros, necesitamos primero configurar la Barra de tareas de Developer o Desarrollador Seleccionan el Menu File>Options>Customize Ribbon o en Español Archivo>Opciones>barra de tareas Despues la parte de seguridad de las macros Menu File>Options>Trus Center o Archivo>Opciones>Centro de Seguridad y marcamos como se ve en la imagen, la cuarta opción y el combo Ejemplo Vamos hacer un ejemplo donde, tengamos que generar varios diplomas de fin de curso, pero con una lista de Nombres , entonces vamos a crear un nuevo archivo en Word y le vamos a guardar como tipo Macro  Tenemos una plantill
Leer más

Macro de Excel para abrir archivo csv

Imagen
Hay veces que quieres abrir un archivo de Excel pero está separado por comas, punto y coma o por un pipe. Hay formas de hacerlos desde Excel. Les quiero compartir algunas opciones de como hacerlo y espero que les sean de utilidad. 1.Es abrir el archivo en Excel y utilizar la función de separar por columnas y seleccionar el delimitador, por ejemplo ";" 2. Es colocar "sep=;" en el primer renglón del archivo que quieres abrir y guardar en formato CSV y abrirlo en Excel y te lo abrirá separado en columnas. 3. Otra forma es con una macro, esté en mi gusto es la que más me funciona porque si hay alguna coma en la descripción o en alguna columna, si lo abres desde Excel te va a desacomodar las columnas.  Este botón te abrirá un pantalla para abrir el archivo que quieres separar y te lo abrirá en una hoja de excel ya separado. El código de la macro es el siguiente  Private Sub CommandButton1_Click() Dim sht As Worksheet Dim fnd As Variant Dim rplc As Variant Dim
Leer más

Graficar funciones en Python con dataframes

Imagen
Bienvenidos a un nuevo post, en esta semana, en esta ocasión les quiero platicar acerca de una librería en Python que se llama  matplotlib  que nos sirve para gráfica funciones de  matemáticas. Habitualmente en Python existen muchas librerías, lo que hay que hacer es primero investigar si ya existe alguna que nos ayude y entenderla antes de inventar el hilo negro, en mi caso encontré la librería  Matplotlib Para instalar deben utilizar el comando PIP en 2.7 Instalando en Python 3.7 Si tienen Python 2.7 deben realizar la ejecución de estos 2 comandos desde consola python -m pip install -U pip python -m pip install -U matplotlib Aunque lo más recomendable es utilizar la versión 3.7 o superior de Python. Programa para graficar en Python import matplotlib.pyplot as plt import numpy as np import math as mt def move_spines():     """Esta funcion divide pone al eje y en el valor      0 de x para dividir claramente los valores positivos y     negativos.&quo
Leer más