Help!!  I am new so bear with me if this is a stupid question.  I am trying to change the color of an item on my page based on input from the user.  Sort of like shopping pages were you can see something in different colors by clicking on the color.  I don't want to open a new page - just change the color of the image on the current page.  I hope this makes sense.  Can I do this and if so how!  Thanks!

I have the image in all the different colors  - so I don't really know if I want to load another image or hide an element and display another one.  I do know that it is not changing any backgound colors. I guess I don't know enough to know the difference.  Is one better, faster, cleaner or easier???  I know that I'm not really helping - but I'm not really sure how to answer.   Sorry and Thanks for the help!!!! 

Yes, I understand the visual effect you want to obtain. There are several ways to do it, depending on the situation.

If all the images have the same size (dimensions) and you want the change to always happen fast (without waiting to load each specific image AFTER user has clicked a color), here's what I suggest, it is called "Image Sprites".

 - Note the height of an image, for example 100px.

 - With any picture editor (even standart Microsoft's Paint will do), put all the images one under another into one single image, like this:

[]
[]
[]
[]
[]

- Use this image as a background for a Frame element (or some other elements, even an empty Image element if you want)

- Now, if you preview your page, you will see first of your images (you need of course to set the size of the element to match the size of 1 image)

- Add your color "trigger" elements - I suggest Frames

- In Styles-Customize, set Background Color for each "trigger", and Cursor to "pointer".

- In Properties of each "trigger", set Personalized class to "color1" (for first), "color2" (for second) etc.
In Properties of your image container element, set Personalized class to "colorimages".

- Now the magic part: add Code Block (Source) type Javascript position Headers, with the code:

$(function(){ // standard jQuery "shortcut" code, to execute after page structure loads

$('.color1').click(function(){ // happens on clicking 1rs color trigger
  $('.colorimages').css('background-position', '0px 0px');
});

$('.color2').click(function(){ // happens on clicking 1rs color trigger
  $('.colorimages').css('background-position', '0px 100px'); // 100 is the image height, change!
});

$('.color3').click(function(){ // happens on clicking 1rs color trigger
  $('.colorimages').css('background-position', '0px 200px'); // 200 is 2 x image height , change!
});

// and so on for each trigger

});