Thursday, January 25, 2007

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)";
}
In the onMouseMove event the function we call changeRate() changes the backgroun d image, when we mouseover on particular TD this function creates the effect of the changing stars.
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.

8 comments:

Anonymous said...

it is very good
I am trying to use it
thanks
i am chinese
i am a php programmer

Serkan Yerşen said...

thanks. i hope it will be useful for you.

Anonymous said...

Hi,
Nice code
Thank you very much.
It made my work very simple

Pôžičky a úvery said...

Nice, but I recommend you to describe it better. You know, everybody looks firstly how it looks (this is Ok), then how it works and how to implement it.

Corinne said...

Interesting to know.

Daniel said...

Can you re-upload the source for this code. I'm new to javascript, but I'm trying to use it. Please!

Ramesh said...

hi very nice but i download link doesn't work, can u give me correct download link or source code.

Serkan Yerşen said...

Hi Ramesh,

I'm sorry but I cannot find the original file. It was so old anyways.

I've written a new version of this star rating tool as a Prototype JS extension. You can find this and other extensions here.This is the test page for rating tool you can see how it is used from the source code

Download the whole tool and check tests folder for all other extensions