Обмен изображениями по клику

Question

Я нахожусь в процессе создания сайта, который позволит пользователю выбирать несколько цветовых схем (для дальтонизма), но также должен быть масштабируемым.Поскольку изображение должно также увеличиваться, у меня нет другого способа сделать это, кроме как сохранить все изображения на странице (не в состоянии контролировать размер фонового изображения ниже IE8).

Это привело меня к этому коду, который добавляетпрефикс ко всем изображениям на странице CURRENT

$(function() {
    $('img.swap').each(function(){     
    $(this).data('current_image', this.src);     
}) 
$('a').click(function(){          
        var prefix = $(this).attr("class");       
         $('img.swap').each(       
         function() {           
            if($(this).data('prefix') != prefix){            
            this.src = $(this).data('current_image').replace('.gif', (prefix)+'.gif');
            $(this).data('prefix', prefix)          
    }         
     else {            
     this.src = $(this).data('current_image');           
      $(this).data('prefix', '')          
      }       
       });  
      }); 
 });

Проблема возникает, когда пользователь нажимает на ссылку, новая страница не запоминает префикс, которым должны быть изображения (цветовая схема).

Вопрос в том, можно ли это сделать, чтобы после нажатия на определенный цвет он запомнился на всем сайте?Если нет, то в любом случае контролировать размер фонового изображения CSS до ie9?

Большое спасибо

Джон

Answer 1

Если вы хотите сделать все на стороне клиента, сохраните значение цветовой схемы в строке запроса:

    var _colorScheme;

    function getQueryStringParam(paramName) {
        queryString = window.location.search.substring(1);
        queryStringParams = queryString.split("&");

        for(i=0;i<queryStringParams.length;i++) {
             param = queryStringParams[i].split("=");
             if (param[0] == paramName)
                   return param[1];
        }
    }

    $(document).ready(function() {
        _colorScheme = getQueryStringParam("color");
    });


$('a').click(function(){          
        var prefix = $(this).attr("class");   

         $('img.swap').each(       
         function() {           
            if($(this).data('prefix') != prefix){            
            this.src = $(this).data('current_image').replace('.gif', (prefix)+'.gif');
            $(this).data('prefix', prefix);

            // remember the new color scheme
            _colorScheme = prefix;
    }         
     else {            
     this.src = $(this).data('current_image');           
      $(this).data('prefix', '')          
      }       
       });  
      }); 

         // attach querystring to link's href attribute so that it is passed to the next page
        var href = $(this).attr('href');
        $(this).attr('href', href + '?color=' + prefix);
 });

Теперь, когда у вас есть готовый _colorScheme документ, вы можете использовать его для установки префиксов изображения. В то же время вам нужно будет использовать jquery для выбора каждой ссылки и присоединить строку запроса к их тегам href. Например, <a href="page.html"> станет <a href="page.html?color=red">.

Лучшей альтернативой является сохранение цветовой схемы в переменной Session, что возможно при использовании сценариев на стороне сервера в php, asp или .net.