jQuery: Gmail Star?

Question

I was wondering if anyone had any good tutorials around creating a gmail inbox star (favorite) ?

EDIT:

I guess I want to create something just like the stackover

Answer 1

HTML:

    
Favorite Me!

CSS (use an image sprite for star):

.star {
     text-indent: -5000px;
     display: block;
     background: transparent url(../images/star.png) [coords for empty star];
     height: [height of star];
     width: [width of star];
}

.star.favorited {
     background-position: [coordinates for favorited star];
}

jQuery:

$(function() { 
    $('star').click(function() {
        var id = $(this).parents('div').attr('id');
        $(this).toggleClass('favorited');
        $.post('/yourUpdateUrl', 
               {'favorited': $(this).hasClass('favorited'), 'id': id},
                  function(data) { 
                     //some sort of update function here
                  });
         });
     });
});

Process on your backend how you will. Probably return how many favorites there are to update the page. Easy.