staricon

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:

  1. 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):
  2. Pegamos este código CSS en nuestro documento:
  3. /*             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;
    }
  4. Ahora insertamos el código HTML con la lista llamando a la clase del rating:
  5. <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