Tema: Star Rater
Ver Mensaje Individual
  #8 (permalink)  
Antiguo 20/01/2010, 14:33
DaveRich
 
Fecha de Ingreso: enero-2010
Mensajes: 34
Antigüedad: 14 años, 4 meses
Puntos: 0
Respuesta: Star Rater
Hola, necesito ayuda, estoy intentando que un archivo php identifique que estrella ha sido pulsada en un star rating:

Código HTML: 
Ver original
  1. <ul class='star-rating'>
  2.     <li class='current-rating'> style='width:105px;' Currently 3.5/5 Stars.</li>
  3.     <li><a href='#' title='1 star out of 5' class='one-star'>1</a></li>
  4.     <li><a href='#' title='2 stars out of 5' class='two-stars'>2</a></li>
  5.     <li><a href='#' title='3 stars out of 5' class='three-stars'>3</a></li>
  6.     <li><a href='#' title='4 stars out of 5' class='four-stars'>4</a></li>
  7.     <li><a href='#' title='5 stars out of 5' class='five-stars'>5</a></li>
  8. </ul>

Código CSS: 
Ver original
  1. /*             styles for the star rater                */  
  2.     .star-rating{
  3.         list-style:none;
  4.         margin: 0px;
  5.         padding:0px;
  6.         width: 150px;
  7.         height: 30px;
  8.         position: relative;
  9.         background: url(star_rating.gif) top left repeat-x;     
  10.     }
  11.     .star-rating li{
  12.         padding:0px;
  13.         margin:0px;
  14.         height:30px;
  15.         width: 30px;        
  16.         /*\*/
  17.         float: left;
  18.         /* */
  19.     }
  20.     .star-rating li a{
  21.         display:block;
  22.         width:30px;
  23.         height: 30px;
  24.         line-height:30px;
  25.         text-decoration: none;
  26.         text-indent: -9000px;
  27.         z-index: 20;
  28.         position: absolute;
  29.         padding: 0px;
  30.         overflow:hidden;
  31.     }
  32.     .star-rating li a:hover{
  33.         background: url(star_rating.gif) left center;
  34.         z-index: 2;
  35.         left: 0px;
  36.         border:none;
  37.     }
  38.     .star-rating a.one-star{
  39.         left: 0px;
  40.     }
  41.     .star-rating a.one-star:hover{
  42.         width:30px;
  43.     }
  44.     .star-rating a.two-stars{
  45.         left:30px;
  46.     }
  47.     .star-rating a.two-stars:hover{
  48.         width: 60px;
  49.     }
  50.     .star-rating a.three-stars{
  51.         left: 60px;
  52.     }
  53.     .star-rating a.three-stars:hover{
  54.         width: 90px;
  55.     }
  56.     .star-rating a.four-stars{
  57.         left: 90px;
  58.     }   
  59.     .star-rating a.four-stars:hover{
  60.         width: 120px;
  61.     }
  62.     .star-rating a.five-stars{
  63.         left: 120px;
  64.     }
  65.     .star-rating a.five-stars:hover{
  66.         width: 150px;
  67.     }
  68.     .star-rating li.current-rating{
  69.         background: url(star_rating.gif) left bottom;
  70.         position: absolute;
  71.         height: 30px;
  72.         display: block;
  73.         text-indent: -9000px;
  74.         z-index: 1;
  75.     }
  76.     /* remove halo effect in firefox   */
  77.     a:active{
  78.         outline: none;
  79.     }

Esos son los códigos y ésta la imágen que utiliza

Lo encontré buscando en google: http://www.komodomedia.com/samples/star_rating/example1.htm

¿Alguien me puede ayudar?
Gracias y saludos.