Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Page 1 of 2 12 LastLast
Results 1 to 15 of 18
  1. #1
    Banned
    Join Date
    Mar 2003
    Posts
    224
    Thanks
    0
    Thanked 0 Times in 0 Posts

    changing bgcolor onclick

    How come this does not work?
    <html>
    <head>
    <title> </title>
    </head>
    <body background="background.jpg">
    <A href="#" onclick="document.bgColor='white'"> Change to white </a> <br />
    </body>
    </html>


    and, how can I make it where it changes the backgrounds intead?


    see bg1
    see bg2
    see bg3
    see bg4

    etc.

    Sorry for being so "asky" today, just doing some image work and this simple script getting better of me.


    Edited -:
    I got this, but i think i am using "background" incorrectly.

    <A href="javascript: document.background='background.jpg'">Change</A>
    Last edited by mattover-matter; 03-31-2003 at 02:15 PM.

  • #2
    Senior Coder Mhtml's Avatar
    Join Date
    Jun 2002
    Location
    Sydney, Australia
    Posts
    3,531
    Thanks
    0
    Thanked 1 Time in 1 Post
    Yeah, you almost had it.
    Code:
    document.body.background='bg.gif';
    Omnis mico antequam dominus Spookster!

  • #3
    Regular Coder
    Join Date
    Nov 2002
    Posts
    596
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Yeah, you almost had it.....

    <a href="javascript&#58;document.body.style.background='url(background.jpg)'">Change</a>

    <a href="javascript&#58;document.body.style.background='white'">Change</a>

    For choices:

    <select onchange="document.body.style.background=options[selectedIndex].value">
    <option value="url(background.jpg)">thingy</option>
    <option value="green">green</option>
    <option value="#9933a0">purplish</option>
    </select>
    Last edited by cheesebagpipe; 03-31-2003 at 08:32 PM.

  • #4
    Banned
    Join Date
    Mar 2003
    Posts
    224
    Thanks
    0
    Thanked 0 Times in 0 Posts
    hmmm... I am not getting this to work.

    <html>
    <head>
    <title> </title>
    </head>
    <body background="background.jpg">
    <a href="javascript:document.body.style.background='url(background.jpg)'">view diff</a><br />
    <a href="javascript:document.body.style.background='url(background1.jpg)'">view diff</a><br />
    <a href="javascript:document.body.style.background='url(background2.jpg)'">view diff</a><br />
    <a href="javascript:document.body.style.background='url(background3.jpg)'">view diff</a><br />
    <a href="javascript:document.body.style.background='url(background4.jpg)'">view diff</a><br />
    <a href="javascript:document.body.style.background='url(background5.jpg)'">view diff</a><br />
    <a href="javascript:document.body.style.background='url(background6.jpg)'">view diff</a><br />
    <a href="javascript:document.body.style.background='url(background7.jpg)'">view diff</a><br />
    <a href="javascript:document.body.style.background='url(background8.jpg)'">view diff</a><br />
    <a href="javascript:document.body.style.background='url(background9.jpg)'">view diff</a><br />
    <a href="javascript:document.body.style.background='url(background10.jpg)'">view diff</a><br />
    </body>
    </html>


    whenever i click it just opens a whitepage saying "url("background.jpg")

    I am SURE these are in the file and everything....

  • #5
    Regular Coder
    Join Date
    Nov 2002
    Posts
    596
    Thanks
    0
    Thanked 0 Times in 0 Posts
    <html>
    <head>
    <title> </title>
    <script type="text/javascript" language="javascript">

    function setPageBG(CSS_val) {
    var oBody = document.getElementsByTagName('body').item(0);
    oBody.style.background = CSS_val;
    }

    </script>
    </head>
    <body background="background.jpg">
    <a href="javascript&#58;void setPageBG('url(background1.jpg)')">view diff</a><br />
    <a href="javascript&#58;void setPageBG('url(background2.jpg)')">view diff</a><br />
    <a href="javascript&#58;void setPageBG('url(background3.jpg)')">view diff</a><br />
    <a href="javascript&#58;void setPageBG('url(background4.jpg)')">view diff</a><br />
    <a href="javascript&#58;void setPageBG('url(background5.jpg)')">view diff</a><br />
    <a href="javascript&#58;void setPageBG('url(background6.jpg)')">view diff</a><br />
    <a href="javascript&#58;void setPageBG('url(background7.jpg)')">view diff</a><br />
    <a href="javascript&#58;void setPageBG('url(background8.jpg)')">view diff</a><br />
    <a href="javascript&#58;void setPageBG('url(background9.jpg)')">view diff</a><br />
    <a href="javascript&#58;void setPageBG('url(background10.jpg)')">view diff</a><br />
    </body>
    </html>

  • #6
    Senior Coder
    Join Date
    Aug 2002
    Posts
    3,467
    Thanks
    0
    Thanked 0 Times in 0 Posts
    cheesebagpipe....

    If indeed all the backgrounds are named that way, why bother sending the whole style rule as a string with each function call?

    function setPageBG(num) {
    var oBody = document.getElementsByTagName('body').item(0);
    oBody.style.background = "url(background" + num + ".jpg)";
    }

    <a href="javascript:void setPageBG(1)">view diff</a><br />

    Or something similar?

    Besides, background is the shorthand rule, backgroundImage is more appropriate
    My Site | fValidate | My Brainbench | MSDN | Gecko | xBrowser DOM | PHP | Ars | PVP
    “Minds are like parachutes. They don't work unless they are open”
    “Maturity is simply knowing when to not be immature”

  • #7
    New Coder
    Join Date
    Jun 2004
    Posts
    48
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Question

    Cant you put an Image URL in the bgColor like this <body bgcolor="image.jpg"> ???

  • #8
    Senior Coder
    Join Date
    Apr 2005
    Posts
    1,051
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Cant you put an Image URL in the bgColor like this <body bgcolor="image.jpg"> ???
    no you cannot.

    try something like this:
    Code:
    <html><head><title>blahcrap</title>
    <style>
    table.colorPalette {
    	width: 100px;
    	height: 100px;
    	border-collapse: border-collapse;
    	border: 2px solid #000000;
    	background-color: #ffffff;
    }
    
    table.colorPalette td {  
    	border: 1px solid #000000; 
    }
    
    #colorPalette {
    	position: absolute;
    }
    </style>
    <script>
    function getElement(aID){
    	var rv = (document.getElementById) ? document.getElementById(aID) :
    	document.all[aID];
    	return rv;
    }
    function setColor(VAL){
    	bg = getElement('body');
    	bg.style.background = VAL;
    }
    </script>
    <body>
    <table height="100%" width="100%" id="body"><tR><td align="centeR">Pick a Colour<br>
    <table class='colorPalette' cellpadding=0 cellspacing=1><tr>
    <td bgcolor="#000000" onClick="setColor('#000000')"><a style="text-decoration:none;" href="#" onClick="setColor('#000000')">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</a></td><!-- Black -->
    <td bgcolor="#00ffff" onClick="setColor('#00ffff')"><a style="text-decoration:none;" href="#" onClick="setColor('#00ffff')">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</a></td><!-- Aqua -->
    <td bgcolor="#0000ff" onClick="setColor('#0000ff')"><a style="text-decoration:none;" href="#" onClick="setColor('#0000ff')">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</a></td><!-- Blue -->
    <td bgcolor="#ff00ff" onClick="setColor('#ff00ff')"><a style="text-decoration:none;" href="#" onClick="setColor('#ff00ff')">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</a></td><!-- Pink -->
    </tr><tr>
    <td bgcolor="#808080" onClick="setColor('#808080')"><a style="text-decoration:none;" href="#" onClick="setColor('#808080')">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</a></td><!-- Gray -->
    <td bgcolor="#008000" onClick="setColor('#008000')"><a style="text-decoration:none;" href="#" onClick="setColor('#008000')">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</a></td><!-- Green -->
    <td bgcolor="#00ff00" onClick="setColor('#00ff00')"><a style="text-decoration:none;" href="#" onClick="setColor('#00ff00')">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</a></td><!-- Lime -->
    <td bgcolor="#800000" onClick="setColor('#800000')"><a style="text-decoration:none;" href="#" onClick="setColor('#800000')">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</a></td><!-- Maroon -->
    </tr><tr>
    <td bgcolor="#000080" onClick="setColor('#000080')"><a style="text-decoration:none;" href="#" onClick="setColor('#000080')">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</a></td><!-- Navy -->
    <td bgcolor="#808000" onClick="setColor('#808000')"><a style="text-decoration:none;" href="#" onClick="setColor('#808000')">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</a></td><!-- Olive -->
    <td bgcolor="#800080" onClick="setColor('#800080')"><a style="text-decoration:none;" href="#" onClick="setColor('#800080')">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</a></td><!-- Purple -->
    <td bgcolor="#ff0000" onClick="setColor('#ff0000')"><a style="text-decoration:none;" href="#" onClick="setColor('#ff0000')">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</a></td><!-- Red -->
    </tr><tr>
    <td bgcolor="#c0c0c0" onClick="setColor('#c0c0c0')"><a style="text-decoration:none;" href="#" onClick="setColor('#c0c0c0')">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</a></td><!-- Silver -->
    <td bgcolor="#008080" onClick="setColor('#008080')"><a style="text-decoration:none;" href="#" onClick="setColor('#008080')">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</a></td><!-- Teal -->
    
    <td bgcolor="#ffffff" onClick="setColor('#ffffff')"><a style="text-decoration:none;" href="#" onClick="setColor('#ffffff')">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</a></td><!-- White -->
    <td bgcolor="#ffff00" onClick="setColor('#ffff00')"><a style="text-decoration:none;" href="#" onClick="setColor('#ffff00')">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</a></td><!-- Yellow -->
    </tr>
    </table>
    </td></tR></table>
    </body>
    </html>
    Last edited by rlemon; 04-04-2005 at 10:49 PM.

  • #9
    New Coder
    Join Date
    Jun 2004
    Posts
    48
    Thanks
    0
    Thanked 0 Times in 0 Posts
    For changing the bgColor I have written this:
    Code:
    <html>
    <head>
    
    <script>
    //bgcolor changing script
    
    var bgmagic=document.all||document.getElementById
    
    function bggo(bgcul){
    	if (bgmagic){
    		with (document){
    		getElementById('body').style.bgColor = bgcul;
    		}
    	}
    }
    </script>
    
    </head>
    <body bgColor="">
    
    <input type="button" onclick="bggo('#000000')" value="bgcolor_changer">
    <br><br>
    <a href="#" onclick="bggo('#000000');">bgcolor_changer</a>
    
    </body>
    </html>
    But when I click the button or the link I get a message informing me of a runtime error on line 13 saying 'object required'.
    I am using frontpage so I don't have to save countless times.

    So what could the problem be ??
    and this script might also work with background pictures.

  • #10
    Supreme Master coder! _Aerospace_Eng_'s Avatar
    Join Date
    Dec 2004
    Location
    In a place far, far away...
    Posts
    19,291
    Thanks
    2
    Thanked 1,043 Times in 1,019 Posts
    you can either do something like this
    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
    "http://www.w3.org/TR/html4/loose.dtd">
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    <title>Untitled Document</title>
    <script>
    //bgcolor changing script
    
    var bgmagic=document.all||document.getElementById
    
    function bggo(bgcul){
    	if (bgmagic){
    		document.getElementsByTagName('body').item(0).style.background = bgcul;
    	}
    }
    </script>
    
    </head>
    <body>
    
    <input type="button" onclick="bggo('#000000')" value="bgcolor_changer">
    <br><br>
    <a href="#" onclick="bggo('#000000');">bgcolor_changer</a>
    </body>
    </html>
    which can be used with a background image also, you would just have to use url(yourbgimage.gif) or to get yours working, try this, i would change the id from body to something different
    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
    "http://www.w3.org/TR/html4/loose.dtd">
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    <title>Untitled Document</title>
    <script>
    //bgcolor changing script
    
    var bgmagic=document.all||document.getElementById
    
    function bggo(bgcul){
    	if (bgmagic){
    		with(document){
    		getElementById('body1').style.background = bgcul;
    		}
    	}
    }
    </script>
    
    </head>
    <body id="body1">
    
    <input type="button" onclick="bggo('#000000')" value="bgcolor_changer">
    <br><br>
    <a href="#" onclick="bggo('#000000');">bgcolor_changer</a>
    </body>
    </html>
    reason you were getting object required because there was no element that had an id of "body"

  • #11
    New Coder
    Join Date
    Jun 2004
    Posts
    48
    Thanks
    0
    Thanked 0 Times in 0 Posts
    JACKPOT!!!!! this works in Frontpage (Internet Explorer) may have to be adjusted for other browsers
    Code:
    <html>
    
    <head>
    <script>
    //bgcolor changing script
    
    var bgmagic=document.all||document.getElementById
    
    function bggo(bgcul){
    	if (bgmagic){
    		with (document){
    		document.getElementsByTagName('body').item(0).bgColor = bgcul;		
    		}
    	}
    }
    </script>
    </head>
    
    <body bgColor>
    
    <input type="button" onclick="bggo('#000000')" value="bgcolor_changer">
    <br><br>
    <a href="#" onclick="bggo('#000000');">bgcolor_changer</a>
    
    </body>
    
    </html>
    Cheers all
    And good luck to mattover-matter with your problem.
    Last edited by MichaelBowler; 04-05-2005 at 12:34 AM.

  • #12
    Senior Coder
    Join Date
    Apr 2005
    Posts
    1,051
    Thanks
    0
    Thanked 0 Times in 0 Posts
    did i mention my code works in mozilla, IE, firefox, netscape, i'm pretty sure opera...ummm...

  • #13
    New Coder
    Join Date
    Jun 2004
    Posts
    48
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Is it possible to apply my code to other elements ?? Like divs or table cells..

  • #14
    Senior Coder
    Join Date
    Apr 2005
    Posts
    1,051
    Thanks
    0
    Thanked 0 Times in 0 Posts
    yes, yes you can!

  • #15
    Supreme Master coder! _Aerospace_Eng_'s Avatar
    Join Date
    Dec 2004
    Location
    In a place far, far away...
    Posts
    19,291
    Thanks
    2
    Thanked 1,043 Times in 1,019 Posts
    mike, you should be able to use the same script, except change body to the element you are trying to change, and i believe that the bolded part below
    Code:
    <script>
    <!--
    //bgcolor changing script
    
    var bgmagic=document.all||document.getElementById
    
    function bggo(bgcul){
    	if (bgmagic){
    		with (document){
    		document.getElementsByTagName('body').item(0).bgColor = bgcul;		
    		}
    	}
    }
    //-->
    </script>
    is how u decide which div to change the color for, it goes from top to bottom, the first div on your page should be 0 and so on. Or you can use getElementById('yourdivid') instead, and target a specific div without having to count the number that belongs to the correct div.


  •  
    Page 1 of 2 12 LastLast

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •