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