Swap images on Click

I am in the process of creating a site, which will allow the user to select multiple color schemes (For colour blindness) but also has to be zoomable. As the image must zoom as well I have no otherway to do it other than keep all images on the page (Not able to control background image size below IE8).

That led me to this code, which adds a prefix to all images on the CURRENT page

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

The problem comes when the user clicks on a link the new page will not remember the prefix the images need to be (the color scheme).

Question is, is there anyway to do it so once you click on a certain color it will remember it throughout the site? If not is there anyway to control CSS background image size prior to ie9?

Many Thanks

John

---

Assuming you want to do everything client-side, store the color scheme value in a querystring:

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

Now that you have _colorScheme set on document ready, you can use that to set your image prefixes. At the same time, you will need to use jquery to select each link and attach a querystring to their href tags. For example, <a href="page.html"> will become <a href="page.html?color=red">.

A better alternative is to store the color scheme in a Session variable, which is possible with server-side scripting in php, asp, or .net.