1.11M Members

Google like background change

 
0
 

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

 
0
 

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

 
0
 

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

 
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.

 
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.

 
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.

 
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

 
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

 
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.

 
0
 

George,

<input type="file" name="bgFileUpload">

Airshow

Question Answered as of 3 Years Ago by Chokladkakan, Airshow, Taywin and 1 other
You
This question has already been solved: Start a new discussion instead
Post:
Start New Discussion
View similar articles that have also been tagged: