[SOLVED] simple rating system

[ohdang888]

i have simple rating system. When the mouse hovers over that star, it and every number star below it turns red, the others stay yellow.... It was working was using the HTML code for stars, but then i turned into images and it got all messed up. hm...

 

any help is appreciated. thanks

 

<center>
<div id="rating_div" width="200px">
<center>
<div align="center" class="style2" onmouseover="this.style.cursor='default';">
  <span id="s1" onclick="starSelection(this.id);"onmouseout="outStar(this.id);"onmouseover= "overStar(this.id);"><img src="http://socialapps.sclek.com/posters/include/rating_system/images/star.gif"></span>
  <span id="s2" onclick="starSelection(this.id);"onmouseout="outStar(this.id);"onmouseover= "overStar(this.id);"><img src="http://socialapps.sclek.com/posters/include/rating_system/images/star.gif"></span>
  <span id="s3" onclick="starSelection(this.id);"onmouseout="outStar(this.id);"onmouseover= "overStar(this.id);"><img src="http://socialapps.sclek.com/posters/include/rating_system/images/star.gif"></span>
  <span id="s4" onclick="starSelection(this.id);"onmouseout="outStar(this.id);"onmouseover= "overStar(this.id);"><img src="http://socialapps.sclek.com/posters/include/rating_system/images/star.gif"></span>
  <span id="s5" onclick="starSelection(this.id);"onmouseout="outStar(this.id);"onmouseover= "overStar(this.id);"><img src="http://socialapps.sclek.com/posters/include/rating_system/images/star.gif"></span>
</div>
</div>

<?php
$res = mysql_query("SELECT rating_id FROM ratings WHERE user_id='$user' and poster_id ='$id' LIMIT 1")or die(mysql_error());
if(mysql_num_rows($res) == 0){
?>
<script type="text/javascript">
var color1 = "#faf4a3";
var color2 = "#f1ec5b";
var color3 = "#e1e558";
var color4 = "#c5c32b";
var color5 = "#978d00";

function overStar(starID){
  var starNo = starID.charAt(1);
  for(var i=1; i<=5; i++){
    if(i<=starNo) document.getElementById('s'+i).innerHTML = "<img src='http://socialapps.sclek.com/posters/include/rating_system/images/star-ps.gif'>";
    if(i>starNo) document.getElementById('s'+i).innerHTML = "<img src='http://socialapps.sclek.com/posters/include/rating_system/images/star.gif'>";
  }
}


function outStar(starID){
  var starNo = starID.charAt(1);
  var rating = document.MyReview.rating.value;
  for(var i=1; i<=5; i++){
    col = "color"+i;
    if(i<=rating){
      document.getElementById('s'+i).innerHTML="<img src='http://socialapps.sclek.com/posters/include/rating_system/images/star.gif'>";
      document.getElementById('s'+i).style.color=eval(col);
    }
    if(i>rating) document.getElementById('s'+i).innerHTML="<img src='http://socialapps.sclek.com/posters/include/rating_system/images/star-ps.gif'>";
  }
}

function starSelection(starID){
  var starNo = starID.charAt(1);
  var code = '<iframe src="http://socialapps.sclek.com/posters/include/rating_system/rate.php?id=<?php echo $id ?>&rating='+ starNo +'" frameborder="0" scrolling="no" width="200" height="100" >Loading...</iframe>';
   
  document.getElementById('rating_div').innerHTML = code;
  document.MyReview.rating.value = starNo;
  for(var i=6; i>0; i--){
    col = "color"+i;
    if(i<=starNo){
      document.getElementById('s'+i).innerHTML="&#9733;";
      document.getElementById('s'+i).style.color=eval(col);
    }
    if(i>rating) document.getElementById('s'+i).innerHTML="&#9734;";
  }
}
</script>

[hobeau]

I tried this in firefox and IE (minus the php statement) and it seemed to work fine. The only issue I could see is that when the mouse was not over one of the stars it left the stars that were displaying red as red (didn't reset). Is this the problem?