CSS:a gift on a rating bar

Question

I want to put this : http://livepipe.net/control/rating A rating bar CSS and my only problem is the image.gif. Can anyone help me with that? that if I try to build it happen that I gif animations: circles that change in a time interval and not when you click on them. If anyone can upload an example or explain how to build this type of gif correctly greatly appreciate it.

http://livepipe.net/control/rating

Answer 1

If you look at the source of that webpage, you'll see that this is the image used for the rating.

It is a single .gif and it is not animated. To control what selection to show, he has defined a number of CSS classes as follows:

.rating_container a {  
    float:left;  
    display:block;  
    width:25px;  
    height:25px;  
    border:0;  
    background-image:url("/stylesheets/rating.gif");  
} 

.rating_container a.rating_off {  
    background-position:0 0px;  
} 

.rating_container a.rating_half {  
    background-position:0 -25px;  
} 

.rating_container a.rating_on {  
     background-position:0 -50px;  
 } 

.rating_container a.rating_selected {  
     background-position:0 -75px;  
}

Every <a> tag within an element with the class rating_container will automatically set that entire rating sheet as it's background image. As the width/height is forced to be 25 by 25, it will only show a small section of it. He then sets the <a> classes individually based on the rating. For example when a rating is set on, it becomes <a class='rating_on'>, the matching CSS changes the images background-position by -50px on the y axis, this causes the 25x25 <a> window to show a different picture.