Change Background Image OnClick

[xbcn27]

Hello , i'm trying to find a script that changes the background of the page by clicking different images... i mean, I have three different image backgrounds and i would like to have three small pictures (each one for each background) and when the user clicks on them the background changes...
hope you understand my question, my english is very bad.. :-(
thanxs !

[xbcn27]

me again...

i've founded a script that works, when you click on one thumbnail it appears on the background.. but i would like to fix one of the images at the begining, when the page is loaded...
If i set one of the pictures on the body tag, like this:
"body {background-image: 11.jpg} "
the script doesn't works..

Here's the script, if anyone can help me...

<script language="JavaScript">
<!--
 
// Copyright 2001 by www.CodeBelly.com
// Please do *not* remove this notice.
 
var backImage = new Array(); // don't change this
 
// Enter the image filenames you wish to use.
// Follow the pattern to use more images.  The
// number in the brackets [] is the number you
// will use in the function call to pick each
// image.
 
// Note how backImage[3] = "" -- which would
// set the page to *no* background image.
 
backImage[0] = "portfolio/11.jpg";
backImage[1] = "portfolio/22.jpg";
backImage[2] = "33.jpg";
backImage[3] = "";
 
// Do not edit below this line.
//-----------------------------
 
function changeBGImage(whichImage){
if (document.body){
document.body.background = backImage[whichImage];
}
}
 
//-->
</script>
 

[acoder]

Set the style.backgroundImage property instead. See how.

[xbcn27]

Set the style.backgroundImage property instead. See how.

thank you ! but i still have the problem...if i set the style.backgroundImage property the script doesn't works...

i've got three images that i want to be showed in the background by clicking on different thumbnails but whith the script i've posted when the page is loaded no pictures are showed until you click on one thumbnail...

and if i set backgroundimage on load the script does not changes the images...

:-) thank you...

[acoder]

If i set one of the pictures on the body tag, like this:
"body {background-image: 11.jpg} "
the script doesn't works..

That's CSS. Put it within style tags on the page, e.g. [HTML]<style type="text/css">
body {background-image: url(11.jpg);}
</script>[/HTML]

[xbcn27]

That's CSS. Put it within style tags on the page, e.g. [HTML]<style type="text/css">
body {background-image: url(11.jpg);}
</script>[/HTML]

no... first thing i tried, and it doesn't works with the script i posted because the background does not changes, only see the one i load with the css sentence...

[acoder]

Post your whole page code.

[hsriat]

me again...

i've founded a script that works, when you click on one thumbnail it appears on the background.. but i would like to fix one of the images at the begining, when the page is loaded...
If i set one of the pictures on the body tag, like this:
"body {background-image: 11.jpg} "
the script doesn't works..

Here's the script, if anyone can help me...

<script language="JavaScript">
<!--
 
// Copyright 2001 by www.CodeBelly.com
// Please do *not* remove this notice.
 
var backImage = new Array(); // don't change this
 
// Enter the image filenames you wish to use.
// Follow the pattern to use more images.  The
// number in the brackets [] is the number you
// will use in the function call to pick each
// image.
 
// Note how backImage[3] = "" -- which would
// set the page to *no* background image.
 
backImage[0] = "portfolio/11.jpg";
backImage[1] = "portfolio/22.jpg";
backImage[2] = "33.jpg";
backImage[3] = "";
 
// Do not edit below this line.
//-----------------------------
 
function changeBGImage(whichImage){
if (document.body){
document.body.background = backImage[whichImage];
}
}
 
//-->
</script>
 

In all the three thumbnails, add changeBGImage(0), changeBGImage(1), changeBGImage(2) as the value of onclick attribute, respectively.
If that doesn't work, post your code here.

PS: Your background images may take time to change when you click on the corresponding thumbnail. That can be solved by caching those images but keeping them hidden by using display:none.

[xbcn27]

Thank you very much.. :-) here's the code..


[HTML]<html>
<head>
<title>POPLUV.COM</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<link href="css/estilo.css" rel="stylesheet" type="text/css">
<script language="JavaScript">
<!--

// Copyright 2001 by www.CodeBelly.com
// Please do *not* remove this notice.

var backImage = new Array(); // don't change this

// Enter the image filenames you wish to use.
// Follow the pattern to use more images. The
// number in the brackets [] is the number you
// will use in the function call to pick each
// image.

// Note how backImage[3] = "" -- which would
// set the page to *no* background image.

backImage[0] = "portfolio/11.jpg";
backImage[1] = "portfolio/22.jpg";
backImage[2] = "portfolio/33.jpg";
backImage[3] = "portfolio/44.jpg";

// Do not edit below this line.
//-----------------------------

function changeBGImage(whichImage){
if (document.body){
document.body.background = backImage[whichImage];
}
}

//-->
</script>

</head>
<body >
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td>
<font class="destacadoportfolio1">La Gresca</font><font class="destacadoportfolio2"><br>
texto </font> <br>
<span class="destacadoportfolio1"><a href="javascript:changeBGImage(0)">1</a> <a href="javascript:changeBGImage(1)">2</a> <a href="javascript:changeBGImage(2)">3</a> <a href="javascript:changeBGImage(3)">4</a> </span></td>
</tr>
</table>
</body>
</html>[/HTML]

[acoder]

In changeBGImage, change the JavaScript to:

document.body.style.backgroundImage = "url("+backImage[whichImage]+")";

PS. use [code] tags when posting code. Thanks!

[xbcn27]

it works !! hehe.. thank you very much ..

[acoder]

No problem. Glad it's working!

[teramatics]

I have question for this script.
How to add link page target onclick bottom?

for example:
changeBGImage(0) on page1.php, so open page1.php with image (0)
changeBGImage(1) on page2.php, so open page2.php with image (1)
changeBGImage(2) on page2.php, so open page3.php with image (2)
etc

What's idea?

Many Thanks

[acoder]

So if I understand correctly, you want to open a page with the image as background? If it's the same page, you can change the background image without opening a new page.