The image I choosed is only one 5 star rate image, which makes HTML is prety simple. Just one div for each rating unit.

<div class="star" > </div>
<div class="star" > </div>
<div class="star" > </div>
<div class="star" > </div>

CSS

The div star is just a container. What is important is the position attribute must be relative. The in class is for the div generated by javascript. Its background could be set part of the rating image using negative background-position attribute. See example on the right.

.star {
    position: relative;
    width: 100px;
    height: 17px;
    padding: 1px;
    margin: 20px 10px;
}
.in {
    width: 96px;
    height: 17px;
    font-size: 1px;
}
.rate1 {
    background: url(../images/star_rating.gif) 0 -50px;
}

For this image, the following javascript function calculates the top value to retrieve the part of the image representing the rate value.

function topbyrate (r){
    var a = r<3 ? -14 : -15;
    return (a -36*r)+"px";
}

Rate Object

For the whole system, I've made a javascript object to make it east to invoke. The property of rateitems is what you need to consider. The length of it should be the same as the number of rate divs.

function rate(){
 this.rateitems = ["abc.com","bbc.com","sd.com","pag.com"];
}

rate.prototype = { 
init: function(cls,r){

    this.rtdivs = getElementsByClass(cls);
    for (i = 0; i < this.rtdivs.length; i++) {
        this.addrate(this.rtdivs[i],0);
    }
   this.restrict = r;  
   this.getrate(this.rtdivs,this.rateitems);

},
...
}

Now let's invoke the rate object. 2 parameters are needed for init method,

• cls - the class name of the rate divs
• r - a switch to allow multiple rates. Normally it should be "on". Here set to "off" for testing purpose.

var rt1 = new rate();
rt1.init("star","off");