change background images onclick in jquery

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'm not sure I fully understand what you're trying to accomplish, but you might try using this:

$(this).css("border","2px solid red")
       .parent().siblings().find('a')
       .css('border', 0);

http://jsfiddle.net/8vFEd/23/

Answer 2

I'd comment this onto Joseph's post but I don't have that privilege yet, so hey.

It's probably worth applying a default border of 2px solid #fff (where #fff is the background of the parent) to all the links, so it's just a case of changing the colour, which means there'll be no problems with links moving up and down as they get clicked (as you can see in his Fiddle).

For adding/removing the images,

$(".prop a").click(function() {
    // Give this the green background image
    $(this).css({ "border-color": "#f00", "background-image": "url('http://colourlovers.com.s3.amazonaws.com/images/patterns/113/113140.png')" })
    .parent().siblings().find('a')
    // Give all the others the red background image
    .css({ 'border-color': '#fff', 'background-image': "url('http://colourlovers.com.s3.amazonaws.com/images/patterns/155/155260.png')" });
});

Quick easy fix, from his code: http://jsfiddle.net/bwfFL/1/

Answer 3

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