Star rating using CSS Sprite and Jquery – With Demo
On 01.17.10, In Ajax, CSS, PHP, jquery, by Steve
As we all know CSS sprite and jquery are in trend. I have seen many star rating tricks but none of them are using css-sprite. I tried to make one , hope you all will love it. Moreover i have used ajax call to store the voting value.
So lets start with HTML. Simply paste following HTML just inside your body tag:
1 2 3 4 5 6 7 |
star one
star two
star three
star four
star five
|
.
Here comes the tricky CSS. Paste it in your stylesheet:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 |
#ratingdiv{overflow:hidden}
#ratingdiv .undone, #ratingdiv .fade{
background:url("star.gif") -30px 0 no-repeat;
width:28px;
display:block;
height:30px;
float:left;
margin-right:4px;
text-indent:-99999px
}
#ratingdiv .done{
background:url("star.gif") no-repeat;
width:28px;
display:block;
height:30px;
float:left;
margin-right:4px;
text-indent:-99999px
}
#ratingdiv .undone:hover{background-position:0}
|
.
Make a new php file and name it as “rate.php”. Paste the following code in it:
1 2 3 4 5 6 7 8 9 10 11 12 |