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; } |
Comments
[…] between classes today I updated the meter. It’s essentially the same script, just it changes background images now, instead of having […]