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" />
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
