469,314 Members | 2,210 Online
Bytes | Developer Community
New Post

Home Posts Topics Members FAQ

Post your question to a community of 469,314 developers. It's quick & easy.

Change Background Image OnClick

6
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 !
Mar 3 '08 #1
13 14022
xbcn27
6
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...

Expand|Select|Wrap|Line Numbers
  1. <script language="JavaScript">
  2. <!--
  3.  
  4. // Copyright 2001 by www.CodeBelly.com
  5. // Please do *not* remove this notice.
  6.  
  7. var backImage = new Array(); // don't change this
  8.  
  9. // Enter the image filenames you wish to use.
  10. // Follow the pattern to use more images.  The
  11. // number in the brackets [] is the number you
  12. // will use in the function call to pick each
  13. // image.
  14.  
  15. // Note how backImage[3] = "" -- which would
  16. // set the page to *no* background image.
  17.  
  18. backImage[0] = "portfolio/11.jpg";
  19. backImage[1] = "portfolio/22.jpg";
  20. backImage[2] = "33.jpg";
  21. backImage[3] = "";
  22.  
  23. // Do not edit below this line.
  24. //-----------------------------
  25.  
  26. function changeBGImage(whichImage){
  27. if (document.body){
  28. document.body.background = backImage[whichImage];
  29. }
  30. }
  31.  
  32. //-->
  33. </script>
  34.  
Mar 3 '08 #2
acoder
16,027 Expert Mod 8TB
Set the style.backgroundImage property instead. See how.
Mar 3 '08 #3
xbcn27
6
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...
Mar 3 '08 #4
acoder
16,027 Expert Mod 8TB
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]
Mar 3 '08 #5
xbcn27
6
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...
Mar 3 '08 #6
acoder
16,027 Expert Mod 8TB
Post your whole page code.
Mar 4 '08 #7
hsriat
1,654 Expert 1GB
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...

Expand|Select|Wrap|Line Numbers
  1. <script language="JavaScript">
  2. <!--
  3.  
  4. // Copyright 2001 by www.CodeBelly.com
  5. // Please do *not* remove this notice.
  6.  
  7. var backImage = new Array(); // don't change this
  8.  
  9. // Enter the image filenames you wish to use.
  10. // Follow the pattern to use more images.  The
  11. // number in the brackets [] is the number you
  12. // will use in the function call to pick each
  13. // image.
  14.  
  15. // Note how backImage[3] = "" -- which would
  16. // set the page to *no* background image.
  17.  
  18. backImage[0] = "portfolio/11.jpg";
  19. backImage[1] = "portfolio/22.jpg";
  20. backImage[2] = "33.jpg";
  21. backImage[3] = "";
  22.  
  23. // Do not edit below this line.
  24. //-----------------------------
  25.  
  26. function changeBGImage(whichImage){
  27. if (document.body){
  28. document.body.background = backImage[whichImage];
  29. }
  30. }
  31.  
  32. //-->
  33. </script>
  34.  
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.
Mar 4 '08 #8
xbcn27
6
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]
Mar 4 '08 #9
acoder
16,027 Expert Mod 8TB
In changeBGImage, change the JavaScript to:
Expand|Select|Wrap|Line Numbers
  1. document.body.style.backgroundImage = "url("+backImage[whichImage]+")";
PS. use [code] tags when posting code. Thanks!
Mar 5 '08 #10
xbcn27
6
it works !! hehe.. thank you very much ..
Mar 5 '08 #11
acoder
16,027 Expert Mod 8TB
No problem. Glad it's working!
Mar 5 '08 #12
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
Mar 22 '08 #13
acoder
16,027 Expert Mod 8TB
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.
Mar 22 '08 #14

Post your reply

Sign in to post your reply or Sign up for a free account.

Similar topics

1 post views Thread by nick | last post: by
3 posts views Thread by Bobofrut | last post: by
1 post views Thread by Mike | last post: by
2 posts views Thread by urgido | last post: by
4 posts views Thread by Israel Richner | last post: by
1 post views Thread by CARIGAR | last post: by
reply views Thread by suresh191 | last post: by
reply views Thread by harlem98 | last post: by
reply views Thread by harlem98 | last post: by
By using this site, you agree to our Privacy Policy and Terms of Use.