It shouldn’t be that hard to change the size of the images as long as you follow it through.

The stars were 16px by 16px in my example and all the positions were multiples of that:

key: B=Blank star: O=Orange Star: G = Green Star

colours … .Background position
B B B B B – (0 0)
G B B B B – (0 -16px)
G G B B B – (0 -32px)
G G G B B – (0 -48px)
G G G G B – (0 -64px)
G G G G G – (0 -80px)
O B B B B – (0 -96px)
O O B B B – (0 -112px)
O O O B B – (0 -128px)
O O O O B – (0 -144px)
O O O O O – (0 -160px)

If your image was smaller then just reduce the above to match and then change the list and anchor sizes to match also.

I’d need to see an example to help any further

i read it 3 times and get a fantastic results and sure i put a copy of this lesson on my site here

http://www.azhar2day.com/vb

It will hide the green stars as soon as the stars are rolled over.

It won’t work in IE6 though.

You could hide the initial stars for IE7 upwards by doing this:

ul.rating:hover{background:none!important}

It would need a change of design for ie6 though.

One last question, is there a way to hide the green stars when hovering, which makes the orange ones visible? The reason why is because I’d like to use a PNG image because they allow transparency/opacity,but I discovered that the orange stars are being loaded on top of the green ones, so when using a PNG image they’re still visible behind the orange ones, which looks bad.

You could do something like this:

http://www.pmob.co.uk/temp/star-rating3.htm

I have a question though: how can I make the ratings appear inline, so that text can be on the same line as the star rating?

For example:

Rate this article: [star-matrix1.gif] (43 votes)

Thank you.