Better JQueryish way or CSS sprites

Question

I have a horizontal menu of five images. All of these 5 images have active and grayed state. When a particular image is active the rest 4 need to be grayed out. Similarly for the other images.

I did it in jquery and that too the code is not so optimized and good. It is like this

    $("document").ready(function(){
  $("#imageidone").click(function() {
         $("#imageidone").attr("src","/path to image_active");
         $("#imageidtwo").attr("src","/path to image_grayed");
         $("#imageidthree").attr("src","/path to image_grayed");
         $("#imageidfour").attr("src","/path to image_grayed");
         $("#imageidfive").attr("src","/path to image_grayed");
   });
      $("#imageidtwo").click(function() {
        $("#imageidone").attr("src","/path to image_grayed");
        $("#imageidtwo").attr("src","/path to image_active");
        $("#imageidthree").attr("src","/path to image_grayed");
        $("#imageidfour").attr("src","/path to image_grayed");
        $("#imageidfive").attr("src","/path to image_grayed"); });
and so on for imageidthree, imageidfour, imageidfive
     });

How can I do it in a better way using CSS sprites or a more compact jqueryish way,

Thank You

Answer 1

Use a loop:

var all = ['#imageidone', '#imageidtwo', '#imageidthree', '#imageidfour', '#imageidfive'];

$.each(all, function(selector, idx) {
    $(selector).click(function() {
        $(all.join()).attr('src', '/path to image_grayed');

        $(selector).attr('src', '/path to image_active');
    });
});

Answer 2

You can do it css sprites,

Make a big image with all states and make classes in css and using jquery you can change the class name.

As you always load only one image , performance will be good.