Google like background change

I'm working on a site and I want to give the users option to change the background image.
Of course client-side. My default background-image is put in CSS file.

body {
 background-image: url(images/back.jpg);
 overflow: visible;
 width: 1260px;
 }

I've tried to make some javascript trigering the change

var img = "images/backy.jpg"
function cng(){
if(document.body){
document.getElementsByTagName("BODY").style.background = img;
}
}

It won't work

var img = "images/backy.jpg"
function cng(){
if(document.body){
document.body.background = img;
}
}

Also won't work
The HTML is:

<p class="cng" onclick="cng()"><b>Change background</b></p>

document.write isn't solution. Another important thing is that the image have to be user specified(the user is selecting image from his computer like in uploading file).

george61

Junior Poster in Training

59 posts since Jul 2010

Reputation Points: 10

Solved Threads: 6

1 Year Ago

Try document.getElementsByTagName("BODY").style.backgroundImage = img; instead.

Chokladkakan

Newbie Poster

15 posts since Jul 2010

Reputation Points: 10

Solved Threads: 2

1 Year Ago

Still won't work maybe there would be solution for directly modifiyng the CSS file.

george61

Junior Poster in Training

59 posts since Jul 2010

Reputation Points: 10

Solved Threads: 6

1 Year Ago

Well, I know document.getElementsByTagName("BODY").style.backgroundImage = "url(link)"; would work. Perhaps you could work form there on? I am afraid I don't know how to manage the uploading of an image and all that.

Chokladkakan

Newbie Poster

15 posts since Jul 2010

Reputation Points: 10

Solved Threads: 2

1 Year Ago

Not sure you would get only 1 'body' from your tag (may get an array with 1 element). Shouldn't you use document.getElementsByTagName("BODY")[0].style.backgroundImage = img ??? Also, not sure if the image would be shown if it is not loaded yet. You may need CSS for it.

Taywin

Posting Virtuoso

1,727 posts since Apr 2010

Reputation Points: 229

Solved Threads: 239

1 Year Ago

Still not working. After I click on the change background paragraph nothing happens.
The code is

function cng(){
var imgs = new Array();
imgs[0] = "images/backy.jpg";
imgs[1] = "images/backp.jpg";
if(document.body){
document.getElementsByTagName("BODY").style.backgroundImage[0] = imgs;
}
}

The following works

<html>
<head>
<script type="text/javascript">
function cng(){
var imgs = new Array();
imgs[0] = "images/backy.jpg";
imgs[1] = "images/backp.jpg";
if(document.body){
document.body.background = imgs[0];
}
}
</script>
</head>
<body background="images/back.jpg">
<p style="color:white" onclick="cng()"><b>Change background</b></p>
</body>
</html>

Any suggestions about modifying the CSS via Javascript will be appreciated.

george61

Junior Poster in Training

59 posts since Jul 2010

Reputation Points: 10

Solved Threads: 6

1 Year Ago

a method
for logged in users, the uploaded image url is stored in the db and put into style.css.php on each login from either cookie or session details
of course the first lines of style.css.php look something like

<?php header ('content-type:text/css'); 
ob_start("ob_gzhandler"); ?>/*<style>*/
@media all { .dontall {display:none; } }
@media print { body { line-height:100%; font-size:10.5pt; font-family:verdana, arial, sans-serif; }
.dontprint { display:none; } }
@media screen { .dontshow { display:none; } }
a { text-decoration:none; }
a:hover { background-color:#66cdaa; text-decoration:none; } 
a:focus { background-color:#66cdaa; text-decoration:none;}
a:active { background-color:#66cdaa; text-decoration:none; }
body { background-color:#f6f6f6; body {background-image:url('<?php if(!$_SESSION['bg']) {echo 'paper.png';} else {echo $_SESSION['bg'];} ?>');} color:#000000; font-family:verdana, geneva, arial; margin-left:3%; margin-right:3%;}
/*   bla bla */
<?php ob_flush(); ?>

in the above case, the stylesheet is linked as <link rel="stylesheet" type="text/css" href="http://www.mysite.com/style.css.php">

the gziphandler speeds download of the css file, which is a great candidate for compression the file is large, and contains much repeated strings

almostbob

Posting Sensei

3,149 posts since Jan 2009

Reputation Points: 571

Solved Threads: 376

1 Year Ago

George,

This works for me (IE, FF & Opera):

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<script type="text/javascript">
onload = function(){
	var currentBG;
	var imgs = [
		"url('http://www.daniweb.com/rxrimages/logo.gif')",
		"url('http://img1.cdn.adjuggler.com/banners/Client847175/1280785292729_728x90.gif')"
	];
	function cng(x) {
		if(document.body) {
			x = ++x%imgs.length;
			document.body.style.backgroundImage = imgs[x];
			return x;
		}
	}
	var changeBG = document.getElementById('changeBG');
	changeBG.onclick = function(){ currentBG = cng(currentBG); };
	currentBG = cng(1);
};
</script>
</head>

<body>

<input id="changeBG" type="button" value="Change background" />

</body>
</html>

Airshow

Airshow

WiFi Lounge Lizard

Moderator

2,683 posts since Apr 2009

Reputation Points: 321

Solved Threads: 372

1 Year Ago

Thanks for the help. I'm very interested in the following: the user clicks on the change background button and the user's my computer folder opens then he chooses image file from his computer for background. I need this because for the site I'm working on I have to make upload images option and the upload will be from the client hard disk.

george61

Junior Poster in Training

59 posts since Jul 2010

Reputation Points: 10

Solved Threads: 6

1 Year Ago

George,

Airshow

Airshow

WiFi Lounge Lizard

Moderator

2,683 posts since Apr 2009

Reputation Points: 321

Solved Threads: 372

This question has already been solved

You