Question

Ok, I have a snippet like http://jsfiddle.net/8vFEd/. I am using background images rather than plane background boxes. On click of any rectangle the clicked rectangle needs to change the background image say(active) and the rest as (dim). Once a second rectangle is clicked it needs to have (active) bacground image and the rest the dim image. Basically I am using only 2 jquery backgroung images, and they change background positions depending on what is clicked. can someone guide how do i accomplish this

One will be active ad the rest will be dim on click of that particular rectangle.

Answer 1

I am assuming that you want to change the background images (same logic applies for background color). Lets say, all your rectangles have class “language”.

$(".language").click(function () {
   // Dim out all the rectangles
   $(".language").css("background-image", "url(/dim.jpg)");

   // Make currently clicked rectangle active
   $(this).css("background-image", "url(/active.jpg)");
});