(Tutorial) Como hacer Thumbnails dinámicos,accesibles y ligeros muy fácil

joseomaker · #1 (**permalink**) 14/01/2011, 17:15

Primero definamos algo: Cuanto de ancho y alto,en mi caso,sera de 96x96px.

Comencemos con el HTML,que sera simplemente una imagen metida dentro de un link,con su respectivo alt y demás:

Código HTML:

Ver original<span id="thumb_scatman" class="thumb">
<a href="" title="titulo del thumbnail">
<img src="http://linkdejemplo.com/thumbtrans.png" alt="thumbnail" />
</a>
</span>

ahora,como veran,la imagen lleva a una imagen png,esta imagen tendra el tamaño del thumbnail (en mi caso 96x96) y estara vacia,pero no sera blanca sino que todo lo que tendra sera el canal alpha.

Una vez hecho esto,vamos a hacer las imagen del thumbnail en mi caso sera una simple foto mia re-escala y con bordes redondeados (se los recomiendo,tambien podrian hacer que el thumb paresca un pin).

Ahora,el siguiente paso,en cualquier editor imágenes (yo uso gimp pero ustedes pueden usar photoshop o lo que sea) tomen el thumbnail que hicieron y subanle el brillo mas o menos un 35% para que quede bastante claro.

Supongamos que la imagen del thumb original sea “thumb_1.png”,la version mucho mas clara es la “thumb_1_ligth.png” y la totalmente transparente es “thumbtrans.png”.

Bueno,entonces demos lo dinámico con el todo poderoso CSS:

Código CSS:

Ver original.thumb {
height: 96px;
width: 96px;
}
#thumb_scatman {
  background-image: url(img/thumb_1_ligth.png);
}
#thumb_scatman:hover {
  background-image: url(img/thumb_1.png);
}

Y listo: Un thumbnail mas facil de hacer,mas accesible y facil de hacer que los basados en DHTML,ademas no pierden la dinamica.

Saludos,recuerden:

Comentar es agradecer,no pido nada mas que opiniones

emprear · #2 (**permalink**) 15/01/2011, 10:15

joseomaker:

Vos probaste el código expuesto? cual es el efecot que se supone debe realizar?
Porque como está no funciona.
te sugiero este código

Código HTML:

Ver original<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>thumbs</title>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<style type="text/css">
body {
background-color: #8BD8A4;
}
.miniatura {
background-image: url('img/miniatura.jpg');
display: block;
width: 96px;
height: 96px;
}
.miniatura:hover {
background-image: url('img/miniatura.jpg');
background-position: 0px -96px;
}
</style>
</head>
<body>
<div><a href="img/img.jpg" title="titulo del thumbnail" class="miniatura">
<!-- fix --></a></div>
</body>
</html>

además de funcionar correctamente, tiene una ventaja, estás utilizando una sóla imagen para la miniatura, con lo cual evitas cualquier posible parpadeo (efecto flicker) al hacer el .hover

Demo:
http://foros.emprear.com/css/miniatura/th.html

Saludos

joseomaker · #3 (**permalink**) 15/01/2011, 12:18

Cita:

Iniciado por emprear

joseomaker:

Vos probaste el código expuesto? cual es el efecot que se supone debe realizar?
Porque como está no funciona.
te sugiero este código

Código HTML:

Ver original<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>thumbs</title>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<style type="text/css">
body {
background-color: #8BD8A4;
}
.miniatura {
background-image: url('img/miniatura.jpg');
display: block;
width: 96px;
height: 96px;
}
.miniatura:hover {
background-image: url('img/miniatura.jpg');
background-position: 0px -96px;
}
</style>
</head>
<body>
<div><a href="img/img.jpg" title="titulo del thumbnail" class="miniatura">
<!-- fix --></a></div>
</body>
</html>

además de funcionar correctamente, tiene una ventaja, estás utilizando una sóla imagen para la miniatura, con lo cual evitas cualquier posible parpadeo (efecto flicker) al hacer el .hover

Demo:
http://foros.emprear.com/css/miniatura/th.html

Saludos

grax,la verdad es que lo base en un codigo que si sirve,que estaba en mi maquina pero lo escribi desde una laptop que no era mia.