BRAYANROCKER: HTML de images una a continuacion de otra en vertical, con link

HTML de images una a continuacion de otra en vertical, con link.

Codigo HTML

<!DOCTYPE html>

<head>

<title>Widget Personalizado</title>

<style>

#widget-title {

background-color: #2a2a2a; /* Fondo oscuro para el título */

color: #f9f9f9; /* Texto claro */

padding: 2px; /* Espacio vertical reducido */

text-align: center;

font-family: Arial, sans-serif;

font-size: 14px;

font-weight: bold;

border-bottom: 2px solid #ff0000; /* Línea inferior roja */

width: 180px; /* Ancho ajustado para coincidir con el contenedor */

border-top-left-radius: 0px; /* Borde redondeado izquierdo */

border-top-right-radius: 30px; /* Borde redondeado derecho */

}

#widget-container {

border: 2px solid #333; /* Borde alrededor del contenedor */

box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Sombra */

background-color: #f9f9f9; /* Fondo claro */

border-radius: 0 0 5px 5px; /* Solo bordes redondeados en la parte inferior */

width: 180px; /* Ancho del cuadro */

max-height: 600px; /* Altura máxima del widget */

overflow-y: auto; /* Scroll si el contenido es largo */

}

#text-container {

padding: 0; /* Elimina padding para evitar espacios adicionales */

}

/* Clase base para todas las imágenes con tamaño uniforme */

.ad-image {

width: 180px; /* Tamaño uniforme basado en la primera imagen */

height: 150px; /* Tamaño uniforme basado en la primera imagen */

object-fit: cover; /* Ajusta la imagen al contenedor, recortando si es necesario */

margin: 2px 0; /* Espacio vertical reducido entre imágenes */

display: block; /* Evita espacios adicionales causados por el diseño en línea */

}

/* Clases personalizadas para tamaños editables (opcional) */

.custom-size-1 {

width: 180px;

height: 120px;

}

.custom-size-2 {

width: 180px;

height: 180px;

}

/* Asegura que las imágenes dentro de image-container usen el tamaño definido */

#text-container .image-container img {

max-width: 100%; /* Asegura que las imágenes no excedan el ancho del contenedor */

height: auto; /* Mantiene la proporción si no se especifica un tamaño fijo */

}

</style>

</head>

<body>

<div id="widget-title">Publicidad:</div>

</a>

</div>

</a>

</div>

</a>

</div>

</a>

</div>

</a>

</div>

</a>

</div>

</a>

</div>

</a>

</div>

</a>

</div>

</a>

</div>

</body>

</html>

DEMO:

Widget Personalizado

+++++++++++++++++++++++++++++
A CONTINUACION OTRO MODELO

+++++++++++++++++++++++++++++

<!DOCTYPE html>

<head>

<title>Widget Personalizado</title>

<style>

#widget-title {

background-color: #2a2a2a; /* Fondo oscuro para el título */

color: #f9f9f9; /* Texto claro */

padding: 2px; /* Espacio vertical reducido */

text-align: center;

font-family: Arial, sans-serif;

font-size: 14px;

font-weight: bold;

border-bottom: 2px solid #ff0000; /* Línea inferior roja */

width: 180px; /* Ancho ajustado para coincidir con el contenedor */

border-top-left-radius: 0px; /* Borde redondeado izquierdo */

border-top-right-radius: 30px; /* Borde redondeado derecho */

}

#widget-container {

border: 2px solid #333; /* Borde alrededor del contenedor */

box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Sombra */

background-color: #f9f9f9; /* Fondo claro */

border-radius: 0 0 5px 5px; /* Solo bordes redondeados en la parte inferior */

width: 180px; /* Ancho del cuadro */

max-height: 600px; /* Altura máxima del widget */

overflow-y: auto; /* Scroll si el contenido es largo */

}

#text-container {

padding: 0; /* Elimina padding para evitar espacios adicionales */

}

/* Clase base para todas las imágenes con tamaño uniforme */

.ad-image {

width: 180px; /* Tamaño uniforme basado en la primera imagen */

height: 150px; /* Tamaño uniforme basado en la primera imagen */

object-fit: cover; /* Ajusta la imagen al contenedor, recortando si es necesario */

margin: 2px 0; /* Espacio vertical reducido entre imágenes */

display: block; /* Evita espacios adicionales causados por el diseño en línea */

}

/* Clases personalizadas para tamaños editables (opcional) */

.custom-size-1 {

width: 180px;

height: 120px;

}

.custom-size-2 {

width: 180px;

height: 180px;

}

/* Asegura que las imágenes dentro de image-container usen el tamaño definido */

#text-container .image-container img {

max-width: 100%; /* Asegura que las imágenes no excedan el ancho del contenedor */

height: auto; /* Mantiene la proporción si no se especifica un tamaño fijo */

}

/* Estilo para el mensaje de error */

#error-message {

color: red;

text-align: center;

font-family: Arial, sans-serif;

font-size: 12px;

padding: 5px;

}

</style>

</head>

<body>

<div id="widget-title">Publicidad:</div>

</div>

// URL del JSON en GitHub (reemplaza con tu URL real)

const jsonUrl = 'https://raw.githubusercontent.com/BRAYANROCKER/images.jso/refs/heads/main/images.json';

// Función para cargar las imágenes dinámicamente

fetch(jsonUrl)

.then(response => {

if (!response.ok) {

throw new Error('No se pudo cargar el JSON');

}

return response.json();

})

.then(data => {

const textContainer = document.getElementById('text-container');

// Iterar sobre las imágenes del JSON

data.images.forEach(image => {

// Crear el contenedor de la imagen

const imageContainer = document.createElement('div');

imageContainer.classList.add('image-container');

// Crear el enlace

const link = document.createElement('a');

link.href = image.url;

link.target = '_blank'; // Abrir en nueva pestaña

link.rel = 'noreferrer noopener'; // Seguridad

// Crear la imagen

const img = document.createElement('img');

img.src = image.imgSrc;

img.alt = image.alt;

img.classList.add('ad-image'); // Aplicar el estilo uniforme

// Añadir la imagen al enlace y el enlace al contenedor

link.appendChild(img);

imageContainer.appendChild(link);

textContainer.appendChild(imageContainer);

});

})

.catch(error => {

console.error('Error al cargar las imágenes:', error);

document.getElementById('error-message').textContent = 'Error al cargar las imágenes. Revisa la URL del JSON.';

});

</script>

</body>

</html>

DEMO:

Widget Personalizado

+++++++

IMAGENES USADAS:

HTML de images una a continuacion de otra en vertical, con link

Entradas populares

Entradas populares

Etiquetas

Twitter

Redes Sociales

Visita mi Web

Follow

Visitantes Pros

Chat en Vivo

Hola, Bienvenido a mi blog!

Categorías

¡Visitanos!