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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37

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;
}
Posted August 31st, 2006 - Permalink
Categories: CSS - JavaScript
You can leave a comment, or trackback from your own site.
 
Adjacent Posts
« « Last.fm Web Services
Amarok 1.4.2 » »
 
Comments