El experimento de los caretos
Este post es una excusa para mostrar un experimento con CSS y una imágenes diseñadas en Freehand, el programa extinto. El enlace: Caretos.
Aprovechamos el atributo background-image de la propiedad hover para lograr el efecto. Con algo de php y sesiones tendremos un resultado más dinámico… Continuaremos desarrollando el experimento en otra entrada de este mismo blog.
Les dejo el código de caretos.html y estilo.css, por si se animan:
Archivo estilo.css
body {width:510px;margin: 0 auto; padding: 0 0 0 0; text-align:center}
.contenedor {float:left;width:100%}
.imagen1, .imagen2, .imagen3, .imagen4, .imagen5, .imagen6, .imagen7, .imagen8,{width:170px;height:198px;float:left;margin: 0 0 0 0;padding:0 0 0 0;text-decoration:none;border:none}
.imagen1 {background-image:url(carpeto/cara1g.gif);}
.imagen1:hover {background-image:url(carpeto/cara1c.gif);}
.imagen2 {background-image:url(carpeto/cara2g.gif);}
.imagen2:hover {background-image:url(carpeto/cara2c.gif);}
.imagen3 {background-image:url(carpeto/cara3g.gif);}
.imagen3:hover {background-image:url(carpeto/cara3c.gif);}
.imagen4 {background-image:url(carpeto/cara4g.gif);}
.imagen4:hover {background-image:url(carpeto/cara4c.gif);}
.imagen5 {background-image:url(carpeto/cara5g.gif);}
.imagen5:hover {background-image:url(carpeto/cara5c.gif);}
.imagen6 {background-image:url(carpeto/cara6g.gif);}
.imagen6:hover {background-image:url(carpeto/cara6c.gif);}
.imagen7 {background-image:url(carpeto/cara7g.gif);}
.imagen7:hover {background-image:url(carpeto/cara7c.gif);}
.imagen8 {background-image:url(carpeto/cara8g.gif);}
.imagen8:hover {background-image:url(carpeto/cara8c.gif);}
Archivo caretos.html
<!DOCTYPE html PUBLIC «-//W3C//DTD HTML 4.01 Transitional//EN «http://www.w3.org/TR/html4/loose.dtd»><html>
<head><meta http-equiv=»Content-Type» content=»text/html; charset=UTF-8″>
<title>Palabros</title>
<link rel=»stylesheet» type=»text/css» href=»caretos.css» title=»estilo»>
</head><body>
<div class=»contenedor»>
<a href=»caretos.html» class=»imagen1″></a>
<a href=»caretos.html» class=»imagen2″></a>
<a href=»caretos.html» class=»imagen3″></a>
<a href=»caretos.html» class=»imagen4″></a>
<a href=»caretos.html» class=»logo»></a>
<a href=»caretos.html» class=»imagen5″></a>
<a href=»caretos.html» class=»imagen6″></a>
<a href=»caretos.html» class=»imagen7″></a>
<a href=»caretos.html» class=»imagen8″></a>
</div></body></html>