02-03-2012, 04:03 PM
Hello! Thank you for your time.
My problem is, I would like to be able to change the background image of my webpage with three different buttons- each changing the background to something different (obviously).
02-03-2012, 04:53 PM
This is assuming that you have set the background image as a property of the BODY tag either inline or via CSS.
*** Note, the URL's used in this for background images were just random links from a google search, these can point to anything, locally or a remote image, so not my images. ***
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<input type="button" name="button" value="Change" onclick="document.body.style.backgroundImage = 'url(http://www.psdgraphics.com/wp-content/uploads/2009/05/abstract-purple-background.jpg)';" />
<input type="button" name="button" value="Original" onclick="document.body.style.backgroundImage = 'url(http://www.dvd-ppt-slideshow.com/images/ppt-background/background-3.jpg)';" />
02-03-2012, 05:05 PM
Thank you very much! So much simpler than all the crazy tactics I was employing.
02-03-2012, 05:08 PM
Best of luck.
02-03-2012, 05:13 PM
If you are looking to avoid having to upload massive images (reduce your load time and to avoid artifacting of your images when they scale to fit the background of your website) I would highly suggest something called Supersized.js. It includes the buttons you were looking for to change the background that you can style however you want w/ css, but if you're doing a full-page image this might be something you could consider. :D
I employed it in this site (http://www.dpjuza.com/home) if you want to take a look (the buttons are in the lower right