Foros del Web - Ver Mensaje Individual - (Tutorial) Como hacer Thumbnails dinámicos,accesibles y ligeros muy fácil

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