jmhobbs

Javascript Rating Meter

Update: A newer version is outlined in this post.

Due to a discussion I had earlier today, I was thinking about how to make one of those little star meters where you can click to set the rating and they change colors. I took some time to code up this quick version.

I didn't want to use image swapping, because that wouldn't be as flexible. So instead, you change the background color and have a transparent cutout of the image you want over that. It'll make more sense once I get an example made.

For now, here's my prototype. It needs a lot of work to make it into a good script, but it's a start. Example Here

var sets = Array();

function hover(level) {
  for(j = 1; j <= level; j++)
  {
    document.getElementById('S'+j).style.backgroundColor = "#0FF";
  }
  for(k = (level+1); k <= 5; k++)
  {
    document.getElementById('S'+k).style.backgroundColor = "transparent";
  }
}

function unhover(group) {
  for(j = 1; j < 6; j++)
  {
    if(sets[group] == null)
    {
      document.getElementById('S'+j).style.backgroundColor = "transparent";
    }
    else
    {
      if(sets[group] >= j)
      {
        document.getElementById('S'+j).style.backgroundColor = "#F00";
      }
      else
      {
        document.getElementById('S'+j).style.backgroundColor = "transparent";
      }
    }
  }
}

function set(group,level) {
  sets[group] = level;
}