Images Needed:
Empty Star
Empty Star

<script language=”JavaScript”>
/***********************************************
* 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>