Posted By

designerd on 10/11/06


Tagged

css ajax javascript rating


Versions (?)

Who likes this?

16 people have marked this snippet as a favorite

luman
oso96_2000
mdavie
Hollow
vali29
Xek
hans
sys2e
fyreflyX
sammiikins
skidmarx
michellebracken
jbyerson
mathmath
ringo380
rentnil


star-rating


 / Published in: HTML
 

  1. /* styles for the star rater */
  2. .star-rating{
  3. list-style:none;
  4. margin: 0px;
  5. padding:0px;
  6. width: 100px;
  7. height: 20px;
  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. /*\*/
  15. float: left;
  16. /* */
  17. }
  18. .star-rating li a{
  19. display:block;
  20. width:20px;
  21. height: 20px;
  22. text-decoration: none;
  23. text-indent: -9000px;
  24. z-index: 20;
  25. position: absolute;
  26. padding: 0px;
  27. }
  28. .star-rating li a:hover{
  29. background: url(star_rating.gif) left bottom;
  30. z-index: 1;
  31. left: 0px;
  32. }
  33. .star-rating a.one-star{
  34. left: 0px;
  35. }
  36. .star-rating a.one-star:hover{
  37. width:20px;
  38. }
  39. .star-rating a.two-stars{
  40. left:20px;
  41. }
  42. .star-rating a.two-stars:hover{
  43. width: 40px;
  44. }
  45. .star-rating a.three-stars:hover{
  46. width: 60px;
  47. }
  48. .star-rating a.three-stars{
  49. left: 40px;
  50. }
  51. .star-rating a.four-stars{
  52. left: 60px;
  53. }
  54. .star-rating a.four-stars:hover{
  55. width: 80px;
  56. }
  57. .star-rating a.five-stars{
  58. left: 80px;
  59. }
  60. .star-rating a.five-stars:hover{
  61. width: 100px;
  62. }
  63.  
  64.  
  65. <ul class='star-rating'>
  66. <li><a href='#' title='Rate this 1 star out of 5' class='one-star'>1</a></li>
  67. <li><a href='#' title='Rate this 2 stars out of 5' class='two-stars'>2</a></li>
  68. <li><a href='#' title='Rate this 3 stars out of 5' class='three-stars'>3</a></li>
  69. <li><a href='#' title='Rate this 4 stars out of 5' class='four-stars'>4</a></li>
  70. <li><a href='#' title='Rate this 5 stars out of 5' class='five-stars'>5</a></li>
  71. </ul>

Report this snippet  

Comments

RSS Icon Subscribe to comments
Posted By: sys2e on June 13, 2009

do not complicatedly understand how does this work. Could any one explain this to me?

Posted By: sys2e on June 13, 2009

do not complicatedly understand how does this work. Could any one explain this to me?

You need to login to post a comment.