How to select only part of image on click

Question

I have a star rating system for a website. I'd like to select 0 1/2 or full stars.

For a SINGLE star click, what I want to achieve is this, and I'm not sure if it is something that can be done in JavaScript of jQuery :

If user clicks anywhere one the left half, it chooses 1/2 star; but on the right half, FULL star. Of course, half's (ideally) would be divided right down the middle - 50/50 of area space.

Is this something that can be done?

Answer 1

The easier is always to have 2 images per start , the left and right image, and a non-selected image that will serve as background if nothing is chosen.

you can easily develop a simple framework to make it reusable throughout your website (and future projects) but I do wonder , do you really want to do something that dozens of other open source projects already do?

as an example , check this RateIt plugin examples:

http://www.radioactivethinking.com/rateit/example/example.htm

it includes all you need plus, all the extra nice ajax calls and several others settings that makes this really easy to use.