Day: March 23, 2007

Una de las cosas que más me ha gustado de Design Meltdown es que te indica que thumbnails has visitado.

Se trata de lo siguiente, tienes un enlace que contiene una imagen en miniatura que accede a la imagen con el tamaño original (thumbnail). Cuando ya has visitado la imagen el thumbnail cambia y te dice que ya lo has visitado.

Para hacerlo es sencillo, creas una capa con un tamaño específico (el del thumbnail), le indicas mediante estilo dentro de la propia etiqueta HTML la imagen de fondo, que será el thumbnail en sí.

Dentro de la capa incluyes un enlace que se mostrará como un bloque (display: block) y que no mostrará nada, bueno, en este caso si mostrará un texto que referencie a lo que enlaza, pero mediante estilos el texto no se verá, esto lo hacemos así para que los dispositivos que no admitan estilos puedan ver algo.

Modificaremos el estilo de enlace visitado para que muestre como fondo una imagen parcialmente transparente y que muestre el texto “visitada”.

.contenedor-imagen {
width: 150px;
height: 85px;
}
.contenedor-imagen a {
text-indent: -100000px;
display: block;
width: 150px;
height: 85px;
border: 2px solid #FFFFFF;
}
.contenedor-imagen a:hover {
border: 2px solid #FF0000;
}
.contenedor-imagen a:visited {
background: url(visitada.gif);
}

<div class="contenedor-imagen" style="background: url(miniatura.png)">
<a href="http://sentidoweb.com?ejemplo1">Sentido Web</a>
</div>

Ejemplo