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).

5

Contributors

9

Replies

2 Days

Discussion Span

2 Years Ago

Last Updated

10

Views

Question
Answered

george61

Junior Poster in Training

59 posts since Jul 2010

Reputation Points: 10

Solved Threads: 6

Skill Endorsements: 0

2 Years Ago

0

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

Chokladkakan

Newbie Poster

15 posts since Jul 2010

Reputation Points: 10

Solved Threads: 2

Skill Endorsements: 0

2 Years Ago

0

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

Skill Endorsements: 0

2 Years Ago

0

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

Skill Endorsements: 0

2 Years Ago

0

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 Maven

2,633 posts since Apr 2010

Reputation Points: 275

Solved Threads: 375

Skill Endorsements: 17

2 Years Ago

0

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

Skill Endorsements: 0

2 Years Ago

0

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

Nearly a Senior Poster

3,282 posts since Jan 2009

Reputation Points: 585

Solved Threads: 399

Skill Endorsements: 7

2 Years Ago

0

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,782 posts since Apr 2009

Reputation Points: 370

Solved Threads: 388

Skill Endorsements: 9

2 Years Ago

0

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

Skill Endorsements: 0

2 Years Ago

0

George,

Airshow

Airshow

WiFi Lounge Lizard

Moderator

2,782 posts since Apr 2009

Reputation Points: 370

Solved Threads: 388

Skill Endorsements: 9

Question Answered as of 2 Years Ago by Airshow, Chokladkakan, almostbob and 1 other

Google like background change

This question has already been solved: Start a new discussion instead