Rating Stars, Add Star themed Rating measure to your site
Hi, here is a example of, how to add rating stars on your site.
By using this codes, you can simply add your site, this tiny little rating stars. :)
Proccess is quite easy
First we have to create a 5 X 1 table which has a background of star pictures.
<table id="starTable" width="75" height="15" border="0" cellpadding="0" cellspacing="0" background="star0.gif" onMouseOut="resetRate(this)">
<tr>
<td width="15" height="15" onMouseOver="changeRate('1')" onClick="rate(this,'1')"></td>
<td width="15" onMouseOver="changeRate('2')" onClick="rate(this,'2')"></td>
<td width="15" onMouseOver="changeRate('3')" onClick="rate(this,'3')"></td>
<td width="15" onMouseOver="changeRate('4')" onClick="rate(this,'4')"></td>
<td width="15" onMouseOver="change('5')" onClick="rate(this,'5')"></td>
</tr>
</table>
It seems like each TD has a one particular background, but it's not like that, there are 6 pictures to define 0,1,2,3,4,5 rating points. by this way, it gets more easy to do this.
i set the default background of the table. this background represents the zero rating points.
If you'll pay attention to the Code you'll se three different functions such as,
changeRate()
rate()
resetRate()
let's explain the each function. here is the sample code.
function changeRate(val){
document.getElementById('starTable').style.backgroundImage = "url(star"+val+".gif)";
}
function rate(val){
document.getElementById('rated').value = val;
}
function resetRate(elem){
var val = document.getElementById('rated').value;
if(val == "")
elem.style.backgroundImage="url(star0.gif)";
else
elem.style.backgroundImage="url(star"+val+".gif)";
}
it gets the TD id and sets' the background by this id. this is a easy step because we gave images a smart filenames such as,
star0.gif
star1.gif
star2.gif
etc.
For each rating, "file name" increases . so we can use them like this in our Script.
"star"+val+".gif"
this proccess keep us away from a lot of work.
---
on the onMouseClick event we call rate() function it has only one argument which is rating value. This function takes the argument and puts it into a textbox. We have to keep the selected rating value in some where so we can remember what was selected. Also we can POST or GET the value by this proccess. This function is most important function because when you want to implement this tool into your application or your site, the rating proccess will be in this function. You can call AJAX functions or directly go to the server in this function.
simply this function is the only place you have to edit.
Also you can use Hidden field intead of textbox it will be more appropriate.
I used text box because this is a demo :)
---
The last function is resetRate()
when the mouse lefts the table, it should remember what was selected. this function simply does that.
function directly checks the value of the textbox (or hidden box) that we create, if the value is NULL function simply puts the image ZERO, but if is there any values in it, function does the same thing of the changeRate function does.
--
the Codes are really simple so you can edit them whatever you like
for the source codes Click Here
I hope this will be helpful for you.
