Podemos crear un sistema de puntuación hecho mediante CSS, usando simplemente las listas de HTML para determinar la puntuación y la propiedad background-position para precargar las imágenes del rating cuando pasemos el ratón por encima de ellas.
Para ello deberemos seguir estos pasos:
- Descargamos la imagen del rating y las subimos a la raíz de nuestro servidor (Para que se muestre en http://www.tusitio.com/imagen.gif):
- Pegamos este código CSS en nuestro documento:
- Ahora insertamos el código HTML con la lista llamando a la clase del rating:
/* styles for the star rater */
.star-rating{
list-style:none;
margin: 0px;
padding:0px;
width: 100px;
height: 20px;
position: relative;
background: url(star_rating.gif) top left repeat-x;
}
.star-rating li{
padding:0px;
margin:0px;
/*\*/
float: left;
/* */
}
.star-rating li a{
display:block;
width:20px;
height: 20px;
text-decoration: none;
text-indent: -9000px;
z-index: 20;
position: absolute;
padding: 0px;
}
.star-rating li a:hover{
background: url(star_rating.gif) left bottom;
z-index: 1;
left: 0px;
}
.star-rating a.one-star{
left: 0px;
}
.star-rating a.one-star:hover{
width:20px;
}
.star-rating a.two-stars{
left:20px;
}
.star-rating a.two-stars:hover{
width: 40px;
}
.star-rating a.three-stars:hover{
width: 60px;
}
.star-rating a.three-stars{
left: 40px;
}
.star-rating a.four-stars{
left: 60px;
}
.star-rating a.four-stars:hover{
width: 80px;
}
.star-rating a.five-stars{
left: 80px;
}
.star-rating a.five-stars:hover{
width: 100px;
}
<ul class="star-rating"> <li><a class="one-star" title="Valora 1 estrella de 5" href="#">1</a></li> <li><a class="two-stars" title="Valora 2 estrellas de 5" href="#">2</a></li> <li><a class="three-stars" title="Valora 3 estrellas de 5" href="#">3</a></li> <li><a class="four-stars" title="Valora 4 estrellas de 5" href="#">4</a></li> <li><a class="five-stars" title="Valora 5 estrellas de 5" href="#">5</a></li> </ul>
Un ejemplo (Pasa el ratón por las estrellas):
Vía | Komodemia
