Para este tutorial necesitamos tres imagenes
Reposo
Sobre
Activo
En este caso nuestras imagenes son de 128x34px
En un documento nuevo pones un div con el ID de "comentarios" y, dentro de este un hipervinculo xD
<div id="comentarios">
<a href="javascript:void(0)" onclick="alert('RollOver con CSS By Azielito')"></a>
</div>
Se preguntaran; Y que tiene de bueno esto?, ahora lo sabremos
Abrimos los tags para insertar un estilo de cascadas y creamos uno nuevo para el id que le asignamos al div (en esta ocacion se llama "comentarios")
<style type="text/css">
<!--
#comentarios {
height: 34px;
width: 128px;
}
-->
</style>
Le pusimos esas medidas por que son las de nuestras imagenes
Bien, ahora creamos un subelemento para los vinculos
#comentarios a {
background-image: url(comentarios_0.jpg);
background-repeat: no-repeat;
padding-right: 50%;
padding-left: 50%;
padding-bottom: 18px;
padding-top: 0px;
height: 34px;
width: 128px;
}
con esta instruccion
#comentarios a le estamos diciendo que
TODOS los vinculos dentro de
#comentarios tengan:
la imagen de fondo
que no se repita este fondo
El margen de relleno de izquierda y derecha tendran el 50% de lo que mide el ancho
el margen inferior medira el 18px y el superior 0px
Se pone de nuevo la altura y el ancho por que Iexplorer causa problemas cuando no se le asignan estos
Bien, ahora lo que falta es duplicar este codigo y asignarlo a los sublementos
#comentarios a:hover
#comentarios a:focus
y claro, cambiar el nombre de la imagen de fondo
el codigo final se parecera mucho a este
<!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>R0llOver</title>
<style type="text/css">
<!--
#comentarios {
height: 34px;
width: 128px;
}
#comentarios a {
background-image: url(comentarios_0.jpg);
background-repeat: no-repeat;
padding-right: 50%;
padding-left: 50%;
padding-bottom: 18px;
height: 34px;
width: 128px;
padding-top: 0px;
}
#comentarios a:hover {
background-image: url(comentarios_1.jpg);
background-repeat: no-repeat;
padding-right: 50%;
padding-left: 50%;
padding-bottom: 18px;
height: 34px;
width: 128px;
padding-top: 0px;
}
#comentarios a:focus {
background-image: url(comentarios_2.jpg);
background-repeat: no-repeat;
padding-right: 50%;
padding-left: 50%;
padding-bottom: 18px;
height: 34px;
width: 128px;
padding-top: 0px;
}
-->
</style>
</head>
<body>
<div id="comentarios"><a href="javascript:void(0)" onclick="alert('RollOver con CSS By Azielito')"> </a></div>
</body>
</html>
Espero que les sea de utilidad
