5 Star Rating System

Hi all,
I am using PHP/MySQL for a 5 star rating sytem and Javascript to submit the form. Here is the general code:

A little Javascript:


 function rate(rating) {
    document.rating.stars.value = rating;
    document.rating.submit();
    return true;
 }

The form:


<div id="rating">
  <form name="rating" method="post" action="<?php $_SERVER['PHP_SELF']; ?>">
 	<p><img src="../images/stars/star.gif" alt="1 Star" onclick="rate(1);" />
 	<img src="../images/stars/star.gif" alt="2 Stars" onclick="rate(2);" />
 	<img src="../images/stars/star.gif" alt="3 Stars" onclick="rate(3);" />
 	<img src="../images/stars/star.gif" alt="4 Stars" onclick="rate(4);" />
 	<img src="../images/stars/star.gif" alt="5 Stars" onclick="rate(5);" />
	<input type="hidden" name="stars" value="0" />
    <input type="hidden" name="id" value="<?php echo $id; ?>" /></p> 	
 </form>

Everything works great expect I would like add an image rollover to the stars. Not just a normal image swap but something like they have on Amazon.com when you rate an item. When you move your mouse from the left to the right over the stars each star stays ‘lit-up’ in sucsession. (Click here and scroll a little ways down on the left-hand side to see what I mean.)

I looked at Amazon’s code but it’s so big and clunky - I don’t think I need anything that complicated. Not much luck searching Google either. Any ideas out there? Thanks.

Hmmm… Try something like this:


 function rate(rating) {
    document.rating.stars.value = rating;
    document.rating.submit();
    return true;
 }

 function rate_images(rating) {
    if(!(rating>=1 && rating<=5)) return;

    for(var i=1;i<=rating;i++)
        document.getElementById("rate_image_"+rating).src="lit.gif";
  }


<div id="rating">
  <form name="rating" method="post" action="<?php $_SERVER['PHP_SELF']; ?>">
 	<p><img src="../images/stars/star.gif" id="rate_image_1" alt="1 Star" onmouseover="rate_images(1);" onclick="rate(1);" />
 	<img src="../images/stars/star.gif" id="rate_image_2" alt="2 Stars" onmouseover="rate_images(2);" onclick="rate(2);" />
 	<img src="../images/stars/star.gif" id="rate_image_3" alt="3 Stars" onmouseover="rate_images(3);" onclick="rate(3);" />
 	<img src="../images/stars/star.gif" id="rate_image_4" alt="4 Stars" onmouseover="rate_images(4);" onclick="rate(4);" />
 	<img src="../images/stars/star.gif" id="rate_image_5" alt="5 Stars" onmouseover="rate_images(5);" onclick="rate(5);" />
	<input type="hidden" name="stars" value="0" />
    <input type="hidden" name="id" value="<?php echo $id; ?>" /></p> 	
 </form>

Good idea Young Twig, now we can just add a delay between the setting of each lit.gif:


function rate_images(rating)
{
  if (rating <= 5) {
    setTimeout("rate_images(" + (rating + 1) + ")", 250);
  }
  document.getElementById("rate_image_" + rating).src="lit.gif";

}

I though I had something like that in stock …


<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<title>Nouvelle page 1</title>
<script>
function fillstar(Obj){
var stars=document.getElementsByName(Obj.name)

for(i=0;i<stars.length;i++){

	if (i<=Obj.id){stars[i].src="fullstar.jpg"}
	else{stars[i].src="emptystar.jpg"}
}
}
</script>
<style type='text/css'>
img {height:30px;width:30px;}
</style>
</head>

<body>
<img style="float:left;cursor:pointer;" src="emptystar.jpg" name="star" id="0" onmouseover="fillstar(this)" />
<img style="float:left;cursor:pointer;" src="emptystar.jpg" name="star" id="1" onmouseover="fillstar(this)" />
<img style="float:left;cursor:pointer;" src="emptystar.jpg" name="star" id="2" onmouseover="fillstar(this)" />
<img style="float:left;cursor:pointer;" src="emptystar.jpg" name="star" id="3" onmouseover="fillstar(this)" />
<img style="cursor:pointer;" src="emptystar.jpg" name="star"  id="4"  onmouseover="fillstar(this)" />
<br/><br/>




</body>
</html>

Great! Thanks everyone for your help!