Rating Stars Code
September 28, 2005
I was asked to create some JavaScript code to mimick the star ratings process of other sites being used today. Below is my first attempt. Please feel free to use the code, but please reference this site, if used.
At some later date in the future, I will break down the logic section by section. For the most part, I think the average programmer can understand the jist of it. So, enjoy!
Empty Star

Empty Star

/***********************************************
* Rating Stars v1.0- By Naldo P
* Visit ODLAN at http://odlan.com
* Read blog http://www.odlan.com/blog
***********************************************/
// Define constants
var STAR_BAR_MAX = 5;
var STAR_WIDTH = 16;
var STAR_HEIGHT = 16;
var STAR_EMPTY = new Image(STAR_WIDTH, STAR_HEIGHT);
var STAR_FULL = new Image(STAR_WIDTH, STAR_HEIGHT);
STAR_EMPTY.src = “star_empty.gif”;
STAR_FULL.src = “star_full.gif”;
// Define ALT tags for stars
var starbarAlts = new Array();
for (var i=1; i< =STAR_BAR_MAX; i++)
starbarAlts[i] = i + ‘ out of ‘ + STAR_BAR_MAX;
// Define variables
var setStarBar, endStar;
// This function dissects the name of the star selected into appropriate vars – Dissect Data (dd)
function dd(whichStar){
starData = whichStar.split(“_”);
setStarBar = starData[0]; endStar = starData[1];
}
// This function turns on stars from 1 until star that is mouseovered
function starsOn(whichStar){
dd(whichStar);
for (i=1;i<=endStar;i++)
document['star' + setStarBar + '_' + i].src = STAR_FULL.src;
}
// This function turns off stars — Defaults to selected hidden amount
function starsOff(whichStar){
dd(whichStar);
for (i=1;i<=STAR_BAR_MAX;i++)
document['star' + setStarBar + '_' + i].src = STAR_EMPTY.src;
if (currStarValue = document.quickRate['set_' + setStarBar].value)
starsSetNow(setStarBar+’_'+currStarValue);
}
// This function sets the stars from 1 to the clicked-on star
function starsSetNow(whichStar){
if (whichStar) {
dd(whichStar);
for (i=1;i<=STAR_BAR_MAX;i++)
document['star' + setStarBar + '_' + i].src = STAR_EMPTY.src;
for (i=1;i<=endStar;i++)
document['star' + setStarBar + '_' + i].src = STAR_FULL.src;
document.quickRate['set_' + setStarBar].value = endStar;
}
}
// Variables for doTimer function
var MAX_TIME = 30;
var START_TIME = 0;
var timeCurrent = 0;
var selectedStar;
// This function is used as a timer loop to delay the setting of stars
// The mouseover event may take precendence over the onclick event — so a delay was needed
function doTimer(){
if (!timeCurrent) timeCurrent = START_TIME;
timeCurrent += 1;
if (timeCurrent < 2) {
setTimeout(“doTimer();”, 200);
} else {
starsSetNow(selectedStar); timeCurrent = 0;
}
}
// This function sets the clicked-on star to a global var and performs the timed delay
// before setting the desired star amount
function starsSet(whichStar){
selectedStar = whichStar; // Re-assign selected star value to global var
doTimer(); // Timer needed to set stars after onmouseover event passed
}
function submitForm() {
document.quickRate.submit();
}
// This function writes out the HTML to display a star bar for a set
// and preloads the stars
function insertStarsBar(setNum){
for (i=1;i<=STAR_BAR_MAX;i++){
document.write(“<a href=\”javascript:starsSet(‘” + setNum + “_” + i + “‘)\” onmouseover=\”starsOn(‘” + setNum + “_” + i + “‘)\” onmouseout=\”starsOff(‘” + setNum + “_” + i + “‘)\”><img src=\”star_full.gif\” name=\”star” + setNum + “_” + i + “\” border=\”0\” class=\”star\” alt=\”" + starbarAlts[i] + “\”/>”);
document['star' + setNum + '_' + i].src = STAR_EMPTY.src;
}
}
// –/>
</script>
<style>
img.star { vertical-align: middle; }
<br />
Overall: <script>insertStarsBar(1);</script>
<p>
Speed: <script>>insertStarsBar(2);</script>
<p>
Tires: <script>insertStarsBar(3);</script>
<p>
<a href=”#” onclick=”submitForm()”>Submit</a>
<form name=”quickRate” action=”test.php” method=post>
Overall Hidden: <input type=text name=”set_1″ size=”3″ value=”0″>
Speed Hidden: <input type=text name=”set_2″ size=”3″ value=”0″/ >
Tires Hidden: <input type=text name=”set_3″ size=”3″ value=”0″/ >
<input type=hidden name=”overall”/ >
<input type=hidden name=”speed”/ >
<input type=hidden name=”tires”/ >
<input type=hidden name=”seats”/ >
</form>
</p>
I was searching through my computer for some images and I came across this picture to the left. I am uncertain where I found this image. But after a few minutes of “googling”, I found