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.
Results 1 to 10 of 10
  1. #1
    New Coder
    Join Date
    Feb 2013
    Posts
    10
    Thanks
    2
    Thanked 0 Times in 0 Posts

    Background button change CSS reference

    I am trying to use buttons to change the background of a webpage and I figured out the image coding however I would like to use a CSS gradient background fill so I linked to the external stylesheet and referenced the class. When the page loads it loads with that background so I know the link is correct but when I change it using the button to an image and then click the hopeful gradient fill button it does not want to switch back, is this the correct usage of class? What could I change for it to work?
    Code:
    <html>
    <head>
    <title>Changing Backgrounds</title>
    <link rel="stylesheet" type="text/css" href="../../CSS/welcome.css">
    <script>
    function change() {
        document.body.style.backgroundcolor="class('body')";
    }
    function change1() {
        document.body.style.backgroundImage="url('../../Images/tigers.gif')";
    }
    </script>
    </head>
    
    <body>
    <h3>The current background:<br />
    <form>
    	<input type="Button" onclick="change()" value="Change it" />School Colors<br />
    	<input type="Button" onclick="change1()" value="Change it" />Scenic<br />
    </form>
    </body>
    </html>
    Thanks!

  • #2
    The fat guy next door VIPStephan's Avatar
    Join Date
    Jan 2006
    Location
    Halle (Saale), Germany
    Posts
    8,665
    Thanks
    6
    Thanked 1,006 Times in 979 Posts
    1. JavaScript is case sensitive, i. e. it must read backgroundColor.
    2. The value of the backgroundColor property (or the respective CSS property “background-color”) must be a color value, either in hexadecimal or RGB syntax.
    3. Generally it’s not good practice to change styles with JavaScript. Current practice is to separate function from design, therefore, you should rather change the style hooks CSS can use, i. e. a class. So, it would be better to do document.body.className = 'school_colors'; and then in the CSS define .school_colors {background-color: lime;}

  • #3
    New Coder
    Join Date
    Dec 2012
    Location
    Ingerlund
    Posts
    66
    Thanks
    8
    Thanked 4 Times in 4 Posts
    You can create two separate CSS classes for this and use the following code. Just change the class names around and re-use the code for the other button.



    Code:
      function change() {
                    if (document.body.className == 'bgImage') {
                        document.body.className = 'school_colors';
                    } else {
                        document.body.className = 'school_colors';
                    }
               }

  • #4
    The fat guy next door VIPStephan's Avatar
    Join Date
    Jan 2006
    Location
    Halle (Saale), Germany
    Posts
    8,665
    Thanks
    6
    Thanked 1,006 Times in 979 Posts
    I think in the else clause you want “bgImage” for the class name.

  • #5
    New Coder
    Join Date
    Dec 2012
    Location
    Ingerlund
    Posts
    66
    Thanks
    8
    Thanked 4 Times in 4 Posts
    Yeah hehe thanks, but I jumped the gun anyway, I don't think he actually wants that. I think he just wants one button to do one thing, so this is all he needs:

    Code:
     function change() {
                document.body.className = 'school_colors';
                }
                
      function change1() {
                document.body.className = 'bg1';
                }

    Either way, he's got both now. WELCOME TO CODINGFORUMS PLEASE COME AGAIN!

  • #6
    New Coder
    Join Date
    Feb 2013
    Posts
    10
    Thanks
    2
    Thanked 0 Times in 0 Posts
    Entity is right, I would like one button to do one thing, however with this code:
    Code:
    <html>
    <head>
    <title>Changing Backgrounds</title>
    <link rel="stylesheet" type="text/css" href="../../CSS/welcome.css">
    <script>
    function change() {
        document.body.className = 'school_colors';
    	}
    function change1() {
        document.body.style.backgroundImage ="url('../../Images/tigers.gif')";
    	}
    </script>
    </head>
    
    <body class="school_colors">
    <h3>The current background:<br />
    <form>
    	<input type="Button" onclick="change()" value="Change it" />School Colors<br />
    	<input type="Button" onclick="change1()" value="Change it" />Scenic<br />
    </form>
    </body>
    </html>
    The first button to change it to the gradient fill in the CSS sheet with the school_colors class name still does not work. Would it be easier to simply load a seperate CSS sheet when you click a button and dump the other?
    Cheers!
    Tom Sparks

  • #7
    The fat guy next door VIPStephan's Avatar
    Join Date
    Jan 2006
    Location
    Halle (Saale), Germany
    Posts
    8,665
    Thanks
    6
    Thanked 1,006 Times in 979 Posts
    This works perfectly for me:
    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    <html>
    <head>
    <title>Changing Backgrounds</title>
    <style type="text/css">
    .school_colors {background-color: lime;}
    .bgImage {background-color: red;}
    </style>
    <script type="text/javascript">
    function change() {
        document.body.className = 'school_colors';
    	}
    function change1() {
        document.body.className = 'bgImage';
    	}
    </script>
    </head>
    
    <body class="school_colors">
    <h3>The current background:<br />
    <form>
    	<input type="Button" onclick="change()" value="Change it" />School Colors<br />
    	<input type="Button" onclick="change1()" value="Change it" />Scenic<br />
    </form>
    </body>
    </html>
    Did you assign the right selectors in the CSS and is the CSS file path correct?

  • #8
    New Coder
    Join Date
    Feb 2013
    Posts
    10
    Thanks
    2
    Thanked 0 Times in 0 Posts
    Yes, I think the problem is that I am trying to use a gradient fill, eg:
    Code:
    {background: #006dc6; /* Old browsers */
    	background: -moz-linear-gradient(-45deg, #006dc6 10%, #e6f700 30%, #3a84c3 49%, #516af7 55%, #fff600 77%, #2a49f9 100%); /* FF3.6+ */
    	background: -webkit-gradient(linear, left top, right bottom, color-stop(10%,#006dc6), color-stop(30%,#e6f700), color-stop(49%,#3a84c3), color-stop(55%,#516af7), color-stop(77%,#fff600), color-stop(100%,#2a49f9)); /* Chrome,Safari4+ */
    	background: -webkit-linear-gradient(-45deg, #006dc6 10%,#e6f700 30%,#3a84c3 49%,#516af7 55%,#fff600 77%,#2a49f9 100%); /* Chrome10+,Safari5.1+ */
    	background: -o-linear-gradient(-45deg, #006dc6 10%,#e6f700 30%,#3a84c3 49%,#516af7 55%,#fff600 77%,#2a49f9 100%); /* Opera 11.10+ */
    	background: -ms-linear-gradient(-45deg, #006dc6 10%,#e6f700 30%,#3a84c3 49%,#516af7 55%,#fff600 77%,#2a49f9 100%); /* IE10+ */
    	background: linear-gradient(135deg, #006dc6 10%,#e6f700 30%,#3a84c3 49%,#516af7 55%,#fff600 77%,#2a49f9 100%); /* W3C */
    	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#006dc6', endColorstr='#2a49f9',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
    	}
    Got this CSS code using a generator online, does this help and/or is this even possible to reference?
    Cheers
    Tom Sparks

  • #9
    The fat guy next door VIPStephan's Avatar
    Join Date
    Jan 2006
    Location
    Halle (Saale), Germany
    Posts
    8,665
    Thanks
    6
    Thanked 1,006 Times in 979 Posts
    Works just as well with
    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    <html>
    <head>
    <title>Changing Backgrounds</title>
    <style type="text/css">
    .school_colors {
    	background: #006dc6; /* Old browsers */
    	background: -moz-linear-gradient(-45deg, #006dc6 10%, #e6f700 30%, #3a84c3 49%, #516af7 55%, #fff600 77%, #2a49f9 100%); /* FF3.6+ */
    	background: -webkit-gradient(linear, left top, right bottom, color-stop(10%,#006dc6), color-stop(30%,#e6f700), color-stop(49%,#3a84c3), color-stop(55%,#516af7), color-stop(77%,#fff600), color-stop(100%,#2a49f9)); /* Chrome,Safari4+ */
    	background: -webkit-linear-gradient(-45deg, #006dc6 10%,#e6f700 30%,#3a84c3 49%,#516af7 55%,#fff600 77%,#2a49f9 100%); /* Chrome10+,Safari5.1+ */
    	background: -o-linear-gradient(-45deg, #006dc6 10%,#e6f700 30%,#3a84c3 49%,#516af7 55%,#fff600 77%,#2a49f9 100%); /* Opera 11.10+ */
    	background: -ms-linear-gradient(-45deg, #006dc6 10%,#e6f700 30%,#3a84c3 49%,#516af7 55%,#fff600 77%,#2a49f9 100%); /* IE10+ */
    	background: linear-gradient(135deg, #006dc6 10%,#e6f700 30%,#3a84c3 49%,#516af7 55%,#fff600 77%,#2a49f9 100%); /* W3C */
    	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#006dc6', endColorstr='#2a49f9',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
    }
    .bgImage {background-color: red;}
    </style>
    <script type="text/javascript">
    function change() {
        document.body.className = 'school_colors';
    	}
    function change1() {
        document.body.className = 'bgImage';
    	}
    </script>
    </head>
    
    <body class="school_colors">
    <h3>The current background:<br />
    <form>
    	<input type="Button" onclick="change()" value="Change it" />School Colors<br />
    	<input type="Button" onclick="change1()" value="Change it" />Scenic<br />
    </form>
    </body>
    </html>

  • Users who have thanked VIPStephan for this post:

    Tom Sparks (02-22-2013)

  • #10
    New Coder
    Join Date
    Feb 2013
    Posts
    10
    Thanks
    2
    Thanked 0 Times in 0 Posts
    Ok I will try that thank you!
    Cheers!
    Tom Sparks


  •  

    Tags for this Thread

    Posting Permissions

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