/**** SmartStars
Graphical Star-Rating System with Form Element Interface
* Multiple rating bars in one document.
* Configurable for number of stars and initial setting.
* Unobrusive installation - no onmouseover/onmouseout handlers to install
Demonstration and further details at http://www.hotspot.freeserve.co.uk/scripterlative
The following instructions may be removed, but not the above text.
Please notify any suspected errors in this text or code, however minor.
Description
~~~~~~~~~~~
Generates a horizontal 'rating bar' comprised of either of two graphical images that indicate the current rating. To set a numeric rating, any image in the row may be clicked.
Installation
~~~~~~~~~~~~
Save this file as 'smartstars.js'
In the section of your document, include the script by adding the tags below:
For each rating bar to be generated, create a containing element with a unique ID.
This element may be given any suitable CSS attributes.
Create a form containing a hidden type element for each rating bar.
Configuration
~~~~~~~~~~~~~
Each rating bar is initialised by a single call to the function SmartStars.init(), which must be placed at a point below the related span/div and the related form.
The function takes six parameters as described next.
Parameter 1 - The ID of the span element that will contain the rating bar.
Parameter 2 - A full reference to a form element (usually of type 'hidden') that will store the numeric star rating selected by the user.
Parameter 3 - The initial rating. (0 to display no 'on' stars)
Parameter 4 - The number of stars in the rating bar.
Parameter 5 - The file name of the 'off' graphic. (Include a relative path if necessary)
Parameter 6 - The file name of the 'on' graphic.
Example
~~~~~~~
Create a star rating display using a span with the id 'stars1'. The numeric rating set by the user will be written to the element named 't1', belonging to a form named 'form1'. The initial rating will be set to 5 out of 10 stars. The star graphics used are called 'offstar.gif' & 'onstar.gif'.
At a point below the associated form and span elements, insert:
Note: Parameters 1,5 & 6 must be in quotes, the others must not.
Repeat the above for as many instances as required. Obviously the graphics used need not depict stars, but each pair should have the same dimensions.
That's all there is to it.
GratuityWare
~~~~~~~~~~~~
This code is free for private non-commercial use. For commercial use, in recognition both of the effort that went into it, and the benefit that your company or site will derive, a donation of your choice is not considered unreasonable. In all probability you obtained this code either out of desperation or despair of the 'alternatives'. 'Commercial use'includes use on any website representing any commercial venture (profit-making or otherwise), or any website designed for reward.
If you do not agree with this principle, use of the code may be unwise.
You may donate at www.scripterlative.com, stating the URL to which the donation applies.
*** DO NOT EDIT BELOW THIS LINE *****/
var SmartStars=/*286329323030372053204368616C6D657273*/
{
data:[], logged:0,
init:function(ratingId, formElem, rating, starCount, offStar, onStar)
{
if(!this.logged++)
this.addToHandler(window,'onload',function(){setTimeout(SmartStars.cont,5000)});
if(document.getElementById)
{
var elem=this.data[ratingId]={};
elem.elemRef=document.getElementById(ratingId);
elem.formElem=formElem;
elem.starCount=starCount;
elem.rating=rating;
elem.offStar=offStar;
elem.onStar=onStar;
elem.rating=Math.max(-1,elem.rating);
if(elem.rating!=-1)
elem.rating--;
elem.starTable=[];
if(elem.elemRef)
this.build(ratingId);
else
alert(this.elemRef+" is not a valid element ID.")
}
},
build:function(id)
{
var elem=this.data[id];
for(var i=0, sp, lnk; i len ? (len-1) : elemValue < 1 ? 0 : (elemValue-1) );
this.lightOff(id);
}
},
setFormElem:function(elem, value)
{
var h;
if(elem)
{
h=elem.onchange;
elem.value=value;
elem.onchange=h;
}
},
lightOn:function(id, elemIdx)
{
var dat=this.data[id], table=dat.starTable;
for(var i=0,len=table.length; i