Mostrar imagen aleatoria con JavaScript.


Dentro de nuestro blog Azul Web agregamos justo debajo de la imagen de portada un banner de 350px x 350px que enlaza a una ruta de aprendizaje de nuestra plataforma de cursos profesionales Azul School.

Hasta el día de hoy tenemos 6 rutas, así que lo que hicimos fue un programa en JavaScript para mostrar de forma aleatoria una imagen diferente cada vez que se carga la página.

No es la gran cosa, pero esta página personal me sirve de diario, así que dejo este código aquí por si lo necesito en el futuro.

Dejemos que ChatGTP les explique el código:

Este código es un ejemplo de código JavaScript que muestra un banner con imágenes aleatorias en un sitio web. Se utiliza la función “window.onload” para garantizar que el código se ejecute después de que la página web se haya cargado completamente.

En primer lugar, se define una matriz llamada “images” que contiene objetos que representan cada una de las imágenes del banner. Cada objeto incluye la URL de la imagen, la URL a la que debe dirigir el usuario cuando haga clic en la imagen, una cookie y un título para la imagen.

A continuación, se utiliza la función “Math.floor(Math.random() * images.length)” para generar un número aleatorio que se usará para seleccionar una imagen de la matriz “images”. El código entonces selecciona la imagen correspondiente y la establece como la fuente de la imagen en el elemento HTML con ID “image”.

Por último, se agrega un controlador de eventos “onclick” a la imagen que redirige al usuario a la URL especificada en el objeto correspondiente de la matriz “images”, incluyendo la cookie correspondiente.

El código CSS proporcionado establece el estilo para la sección que contiene el banner. Se utiliza la propiedad “display: flex” para establecer un contenedor con elementos con flexbox y la propiedad “align-items: center” y “justify-content: center” para centrar la imagen dentro del contenedor. Además, se agrega un borde a la imagen y un estilo para el cursor cuando se coloca sobre la imagen.

En resumen, este código muestra cómo se puede crear un banner con imágenes aleatorias y cómo agregar un controlador de eventos para redirigir al usuario a una URL específica cuando se hace clic en la imagen.

Código:

<script>
  window.onload = function() {
    // Array de objetos que contiene información sobre cada imagen.
    var images = [
      { src: "https://www.azulweb.net/wp-content/uploads/2023/02/Ruta-Analisis-de-Datos-con-Python.png", url: "https://www.azulschool.net/ruta-de-aprendizaje-analisis-de-datos-con-python/", cookie: "?pa=D83D0DA2E0&subid=BANNERAZULWEB-350-DATOS", title: "Aprende Analisis de Datos desde cero." },
      { src: "https://www.azulweb.net/wp-content/uploads/2023/02/Ruta-Desarrollo-Web.png", url: "https://www.azulschool.net/ruta-de-aprendizaje-desarrollo-web/", cookie: "?pa=D83D0DA2E0&subid=BANNERAZULWEB-350-WEB", title: "Aprende Desarrollo Web desde cero." },
      { src: "https://www.azulweb.net/wp-content/uploads/2023/02/Ruta-Net.png", url: "https://www.azulschool.net/ruta-de-aprendizaje-microsoft-net/", cookie: "?pa=D83D0DA2E0&subid=BANNERAZULWEB-350-NET", title: "Aprende .Net desde cero." },
      { src: "https://www.azulweb.net/wp-content/uploads/2023/02/Ruta-Programacion-desde-cero.png", url: "https://www.azulschool.net/ruta-de-aprendizaje-programacion-desde-cero/", cookie: "?pa=D83D0DA2E0&subid=BANNERAZULWEB-350-PROGRAMACION", title: "Aprende Programación desde cero." },
      { src: "https://www.azulweb.net/wp-content/uploads/2023/02/Ruta-Python-desde-cero.png", url: "https://www.azulschool.net/ruta-de-aprendizaje-python/", cookie: "?pa=D83D0DA2E0&subid=BANNERAZULWEB-350-PYTHON", title: "Aprende Python desde cero." },
      { src: "https://www.azulweb.net/wp-content/uploads/2023/02/Ruta-WordPress.png", url: "https://www.azulschool.net/ruta-de-aprendizaje-diseno-web-con-wordpress/", cookie: "?pa=D83D0DA2E0&subid=BANNERAZULWEB-350-WORDPRESS", title: "Aprende WordPress desde cero." }
    ];
    // Variable numérica que se genera a partir de una función que devuelve un número aleatorio entre 0 y el número de elementos en el arreglo images.
    var num = Math.floor(Math.random() * images.length);

    // Selecciona el elemento de imagen en el documento HTML.
    var image = document.getElementById("image");

    // Se establece la fuente (src) y el título de la imagen seleccionada en el elemento de imagen.
    image.src = images[num].src;
    image.title = images[num].title;

    // Función de manejo de eventos onclick para la imagen. Cuando se hace clic en la imagen, se redirigirá a la URL especificada en el objeto images[num] agregando también la cookie.
    image.onclick = function() {
      window.location = images[num].url+images[num].cookie;
    };
  };
</script>

<!-- Agregamos los estilos -->
<style>
  /* Centramos el contendio del div */
  div#rutasAzulSchool{
    display: flex;
    align-items: center;
    justify-content: center;
  }
  /* Agregamos un borde, quitamos un poco de margen y establecemos el tamaño de la imagen */
  img#image{
    border: solid #dbdbdb;
    margin-bottom: -21px;
    width: 350px;
  }
  /* Al pasar el mouse por arriba de la imagen agregamos el curso que se ve comunmente en los enlaces y agregamos un poco de brillo */
  img#image:hover {
  cursor: pointer;
  filter: brightness(105%);
}
</style>

<!-- Aquí aparece la imagen final -->
<div id="rutasAzulSchool">
  <img id="image" />
</div>

¿Tienes un cometario sobre esto? Dímelo en Twitter o Facebook.