Rollover usando background-position
Bueno creo que ya todos conocemos el tipico rollover en los botones/links que lo que hace es cambiar la imagen y, si no se pre-cargo usando varios de los trucos que existen, veremos un pequeño
delay o retraso que lo causa la carga de la imagen que llamamos en el hover.
En este tutorial vamos a aprender a hacer un rollover pero usando una sola imagen y la propiedad de background-position para mover la imagen y esta cambie al hacer hover, lo que nos va a llevar a eliminar ese pequeño delay que causa la carga de la imagen al hacer hover.
Esta es la imagen que estaremos usando, como podemos ver la parte de arriba es el boton cuando esta en posicion normal o reposo, y la parte de abajo es el efecto hover.
Primero vamos a crear nuestro link y lo vamos a meter en un contenedor:
<div id="boton">
<a href="#"> </a>
</div>
Ahora vamos a crear nuestra hoja de estilo, y darle propiedades a los links:
<style type="text/css">
#boton a {
display:block;
width:130px;
height:29px;
text-decoration:none;
background:url('button.jpg') no-repeat top;
}
#boton a:hover {
display:block;
width:130px;
height:29px;
text-decoration:none;
background:url('button.jpg') no-repeat bottom;
}
</style>
Pasamos a explicar el codigo, primero usamos
#boton a para que todos los links que esten dentro del div con id
boton tengan estas propiedades. Las primeras propiedades no van a ser explicadas, vamos a pasar directamente a la propiedad
background. La primera opcion de
background es para definir la imagen que se va a usar. La segunda, no-repeat, es para que la imagen de fondo no se repita. Por ultimo,
top/bottom, que seria lo mismo a
background-position: top/bottom, es usado para definir la posicion de la imagen de fondo, cuando esta en
top muestra la parte superior de nuestro boton, y cuando esta en
bottom la parte inferior, que lo usamos para cuando el boton esta
sobre.
Aqui esta el codigo ya completo:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Rollover usando background-position</title>
<style type="text/css">
#boton a {
display:block;
width:130px;
height:29px;
text-decoration:none;
background:url('button.jpg') no-repeat top;
}
#boton a:hover {
display:block;
width:130px;
height:29px;
text-decoration:none;
background:url('button.jpg') no-repeat bottom;
}
</style>
</head>
<body>
<div id="boton">
<a href="#"> </a>
</div>
</body>
</html>
Y aqui esta el boton en funcionamiento:
Rollover usando background-positionTutorial inspirado por azielito:
http://zonaphotoshop.com/foro/index.php?topic=5011.0 
