Webdesign idea - clicking an image converts to background image using jquery?

Question

Hey folks,

I've got this idea. In a webpage design, after clicking an image i want it to merge with the background (in a washed out watermark sort of way). Essentially from an img, it has to go to a background image. Is this possible with jquery?

A solution i could think of is having both a background image and the front image initially show(so the background washed out image is initially hidden behind the main image). After clicking the front image, through a jquery effect have it slowly fade in opacity or even vanish to a background image.

I hope this is making sense? do you have alternative suggestions to achieve this effect?

will greatly appreciate any insight...

KG

Answer 1

You would just have to change your background image to the src of the clicked image:

$("#clicked_image").click( function() {
     var new_bg = $(this).attr("src");
     $("body").css("background-image", "url(" + new_bg + ")").fadeTo(5000, 1);
     // EDIT: also to hide the original image
     $(this).hide();
});

Where 5000 = 5 seconds and 1 = opacity in the fadeTo. Something like this should work.

Answer 2

The only problem I see with the pre-made background that the image hides (which is pretty clever, by the way), is that you would have to go to great lengths to insure that the image lined up perfectly to the hidden background. Also, having a background image pre-made would not be very flexible. What if you wanted to add more images, etc?

I think ryanulit's suggestion is pretty much perfect, but it assumes you want to replace the entire page background with the clicked image. If I'm reading your idea correctly, you want the image to be part of the already existing background.

So what you can do with his code to make that happen is set the height and width of the img element to those of the image first, then set the src of the image to a clear pixel.

var clear_pixel = "images/empty.png";
$("#clicked_image").click( function() {
     var image_src = $(this).attr("src");
     $(this).css("height", $(this).height());
     $(this).css("width", $(this).width());
     $(this).css("background-image", "url(" + new_bg + ")");
     $("this").attr("src", clear_pixel).fadeTo(5000,1);
});

This way, as the image fades to the clear pixel (or perhaps slightly opaque pixel to add a neat watermark tone), the new background image underneath becomes revealed.

The only drawback is that the image isn't truly part of the background, like you suggest, it just appears to be part of the body background but is really the image background.

If you just want the effect, I think this should work. If you want the user to have the option of saving the entire new background, you're probably stuck with pre-making the background (or using some pretty fancy ajax and a server-side image creating library).