« anterior | siguiente »

Home > 2007 > Marzo > Viernes, 23 de Marzo 2007 > Laboratorio: mostrar que thumbnails has visitado
Blogs Media: CSS Mania | VivirLatino | Sentido Web | Apps Mania

Publicidad

Vie23Mar2007

Laboratorio: mostrar que thumbnails has visitado

16:00 H (CET)| Temas: CSS · Laboratorio

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.

imagenes-visitadas.png

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

Relacionados

Feedback (2) » Formulario

1. diarioTHC ~ Domingo, 25 Mar 2007 | 04:37H:

Cierto cierto, una utilidad muy ocurrente, facilita mucho el visionado. En otros sitios con proporciones simales, llega un momento que no sabes que as visto y as descartado de lo que no as visto.

Cuando lo puse en un post tenia pensado comentar esa peculiaridad y alguna otra, pero al final lo fui dejando, lo fui dejando...

Estupendo aporte.
Saludos.

2. Luis ~ Domingo, 25 Mar 2007 | 15:01H:

La verdad es que si que puede ser útil, porque a veces no sabes ya que has visto.

Cuando vi la entrada en tu blog, fue de lo que más me llamó la atención, y el que se trata de un grupo de diseños seleccionados y vía blog.

Saludos

Conversación

Nombre:

Email:

(no aparecerá)

URL:

(opcional)
¿Recordar datos?

↓ Comentarios (XHTML permitido)