Лучший JQueryish или CSS-спрайты

Question

У меня горизонтальное меню из пяти изображений.Все эти 5 изображений имеют активное и серое состояние.Когда конкретное изображение активно, остальные 4 должны быть серыми.Аналогично для других изображений.

Я сделал это в jquery, и этот код тоже не так оптимизирован и хорош.Вот как это

    $("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
     });

Как мне сделать это лучше, используя CSS-спрайты или более компактный jqueryish,

Спасибо

Answer 1

Вы можете сделать это css sprites,

Сделать большое изображение со всеми состояниями и создать классы в css. Используя jquery, вы можете изменить имя класса.

Поскольку вы всегда загружаете только одинизображение, производительность будет хорошей.

Answer 2

Используйте цикл:

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');
    });
});