Divida la imagen en muchas imágenes más pequeñas y permita hipervínculos desde cada imagen individual (como un mapa de imagen)

Answer

1. 

   davy.ai

   June 11, 2023 at 2:46 am

   Solución para Mostrar Imágenes Pequeñas de una Imagen Grande en una Página Web

   Requisitos

   • Se debe dividir la imagen grande en imágenes más pequeñas de 40px por 40px.
   • Las imágenes más pequeñas deben mostrarse en una página web para que se vean como la imagen original.
   • Cada imagen más pequeña debe tener un hipervínculo y un texto alternativo diferente.
   • Cuando el tamaño de la pantalla cambia, las imágenes más pequeñas deben ajustarse en consecuencia y no envolverse alrededor de la página o desplazarse fuera de la página.

   Marco de Trabajo

   El proyecto está utilizando Vue.js y Vuetify.js.

   Solución

   El problema con el uso de un mapa de imágenes en la imagen de tamaño completo es que cuando el tamaño de la imagen se reduce, las coordenadas del mapa no se ajustan en consecuencia. Una solución alternativa es dividir la imagen grande en imágenes más pequeñas de 40px por 40px usando un editor de imágenes y colocarlas en la página web usando CSS Grid.

   Implementación HTML

   <div class="grid">
     <div class="grid-item">
       <a href="image1.html"><img src="image1.jpg" alt="Imagen 1"></a>
     </div>
     <!--... Repita 47 veces más, para un total de 48 imágenes en una fila -->
   </div>
   <!--... Repita 26 veces más, para un total de 27 filas de imágenes -->
   

   Implementación CSS

   .grid {
     display: grid;
     grid-template-columns: repeat(48, 40px);
     grid-template-rows: repeat(27, 40px);
     grid-gap: 0;
     max-width: 1920px;
     width: 100%;
   }
   
   .grid-item {
     display: flex;
     justify-content: center;
     align-items: center;
     border: 1px solid #ccc;
   }
   
   .grid-item img {
     width: 100%;
     height: 100%;
     object-fit: cover;
   }
   

   Cada imagen está envuelta en una etiqueta <a> para proporcionar un hipervínculo y una etiqueta <img> para la imagen en sí. Cada imagen más pequeña tiene 40px por 40px, y el número total de imágenes es de 48 en una fila y 27 filas.

   El diseño CSS Grid se utiliza para colocar cada imagen en su posición correspondiente en la cuadrícula. Las propiedades grid-template-columns y grid-template-rows se establecen en repeat(48, 40px) y repeat(27, 40px), respectivamente, para crear la cuadrícula de 48 columnas y 27 filas, con cada celda siendo de 40px por 40px. La propiedad max-width se establece en 1920px, y la propiedad width se establece en 100% para permitir que la cuadrícula se adapte al tamaño de la pantalla.

   La propiedad object-fit: cover se usa en la etiqueta <img> para asegurarse de que cada imagen cubra toda la celda de 40px por 40px, independientemente de la relación de aspecto de la imagen original.

   Solución Dinámica

   Para agregar una carga dinámica de imágenes y administración de enlaces, podemos usar la directiva v-for en Vue.js para generar el HTML de cada imagen de forma dinámica a partir de una matriz de objetos que contienen la fuente de la imagen, el enlace y el texto alternativo.

   <div class="grid">
     <div v-for="(image, index) in images" :key="index" class="grid-item">
       <a :href="image.link"><img :src="image.src" :alt="image.alt"></a>
     </div>
   </div>
   

   data() {
     return {
       images: [
         {
           src: "image1.jpg",
           link: "image1.html",
           alt: "Imagen 1"
         },
         //... Agregue 47 objetos más para un total de 48 imágenes en una fila
       ]
     }
   }
   

   Con esta solución dinámica, podemos modificar fácilmente la lista de imágenes actualizando la matriz de images en los datos de Vue.js. Esto puede ser útil si se agregan nuevas imágenes al proyecto o si queremos cambiar los enlaces o el texto alternativo para las imágenes.

   Solución Responsiva

   Para que las imágenes se ajusten en consecuencia cuando el tamaño de la pantalla cambia, podemos usar Media Queries CSS para ajustar las propiedades grid-template-columns y grid-template-rows en diferentes tamaños de pantalla.

   @media screen and (max-width: 1200px) {
     .grid {
       grid-template-columns: repeat(24, 40px);
       grid-template-rows: repeat(54, 40px);
     }
   }
   
   @media screen and (max-width: 768px) {
     .grid {
       grid-template-columns: repeat(12, 40px);
       grid-template-rows: repeat(108, 40px);
     }
   }
   
   @media screen and (max-width: 576px) {
     .grid {
       grid-template-columns: repeat(6, 40px);
       grid-template-rows: repeat(216, 40px);
     }
   }
   

   En este ejemplo, la cuadrícula se ajusta para tener 24 columnas y 54 filas cuando el tamaño de la pantalla está entre 1200px y 768px, 12 columnas y 108 filas cuando el tamaño de la pantalla está entre 768px y 576px, y 6 columnas y 216 filas cuando el tamaño de la pantalla es menor de 576px.

   Esto permite que las imágenes se ajusten en consecuencia sin envolver o desplazarse fuera de la página.

   Conclusión

   Con CSS Grid, podemos mostrar fácilmente una imagen grande dividida en imágenes más pequeñas en una página web mientras se conserva la relación de aspecto de cada imagen más pequeña. Agregar carga dinámica y comportamiento responsivo hace que la solución sea escalable y adaptable a diferentes proyectos.

Comments are closed.