how do you switch the background color of a site?

[jaylow]

i was wondering if you can make a button to switch the background color on a sitejust like you switch on a site the languages from English to chines when you click on a flag of that languagesprobably you can :)so how would i make this?i probably need 2 css style sheets and make a button to switch it from one to the otheri am just wonder how the code would look?and if it is done only in html/css or if you need php or javascript?

[Ingolme]

Either Javascript or a server-side language can do it. You can use cookies to remember the selection the user made.With java script:

1. Optional: call an onload handler to load the user's selection from a cookie if there is one.
2. Add an onclick handler to a link.
3. Access the site's <link> element and change its "href" attribute to a certain value based on the link that was clicked
4. Optional: save the new selection in a cookie

With PHP:

1. Optional: Load a selection from a cookie if it exists and print out the value in the <link> tag's href attribute.
2. Make a link pointing to the same page and add a query string to the URL with the value of the stylesheet
3. Load the value from $_GET and print it into the <link> element's href attribute.
4. Optional: Save the selection in a cookie.

[jaylow]

i would like to do it in javascriptis it hard for a beginer to do ? i know nothing about javascript (or php)but got the head first javascript book here and the javascript biblehope that will help do you mabye know any tutorial some where that i could followi tryed to search the web but wel i think i type in the wrong thingsanyway thanks already!

[thescientist]

have you read through the javascript tutorials? What part are you stuck on?

[dsonesuk]

This is very similar to a previous topic, where a dropdown select was used at http://w3schools.invisionzone.com/index.ph...showtopic=28090you just need to replace changecss(this) with changecss('red'), changecss('green') etc, you could also get away with using just one stylesheet link with id reference, and changing the href link to the style sheet you require.

<a href="java script:void(0);" onclick="changecss('blue')">Blue theme</a><br /><a href="java script:void(0);" onclick="changecss('green')">Green theme</a><br /><a href="java script:void(0);" onclick="changecss('red')">Red theme</a><br />

css link create style sheets related to theme 'bluetheme.css', 'greentheme.css' and 'redtheme.css'

<link rel="stylesheet" href="bluetheme.css" type="text/css" id="cssstyle"  />

js

function changecss(styleref){	document.getElementById("cssstyle").href=styleref+"theme.css";	set_cookie("styleref", styleref, 7); //set cookie ref name, value, amount of days to keep cookie}

[jaylow]

perfect that was what i was looking for thanks a lot!