entropia

Voting stars are a popular topic for javascript tutorials.  Probably because they’re nice and easy, but still flashy.  But every tutorial I’ve seen does it in the same, over-complicated way.

The common way of doing it is to put five imgs next to each other and add some onmouseover and onclick events.

The better way of doing it is to use five nested links.  This way, we only need to use javascript for the actual voting, not the highlighting.

Here’s what is usually done:

Some people like to clean it up with unobtrusive javascript, but it generally works the same way.

Here’s how I do it.

First the HTML:

Then the CSS:

That’s it.  No javascript unless you want to do something special with voting (like Ajax).

The crux of this method is that the five-star link is actually five stars, not just a single star.  It uses class stars, which gives it the hover property, and star5, which makes it 150px (or five stars) wide.  The other links are then overlayed on top of each other; that’s what position: absolute is for.  It’s a little counter-intuitive to put the five-star link first in the HTML, but it ensures that the lower votes show up on top.  All the links are actually transparent until you hover over them, them the highlighted star image is applied.

Take a look at the demo here.