VOS BG Color Changer Script | Regplex.com - Lab Regplex in the Valley Of Steel

Background Color Switcher Script
Select Color
Code:
(JQuery Required)
<!doctype html>
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
	<head>
		<meta charset="utf-8">
		<Title>Lab Regplex BG Color Switcher Script</title>
		<style>
			body {
				margin: 0;
				padding: 0 .4em;
				font: 1em/1.2 Arial, sans-serif;
				background-color: #222;
			}
			.switchwrapper {
				margin: auto auto;
				max-width: 50em;
				height: 10px;
				white-space: nowrap;
			}

			.bgswitch {
				display: inline;
				float: left;
				margin: 0px;
				padding: 0px;
				height: 9px;
				width: 7px;
				border: 1px solid #000000;
				clear: none;
			}

			#switch-red {
				background-color: #FF0000;
			}
			#switch-yellow {
				background-color: #FFFF00;
			}
			#switch-orange {
				background-color: #FF7700;
			}
			#switch-green {
				background-color: #00FF00;
			}
			#switch-purple {
				background-color: #FF00FF;
			}
			#switch-blue {
				background-color: #0000FF;
			}
			#switch-clear {
				background-color: #777777;
			}
			#switch-desc {
				float: left;
				clear: none;
				font-size: .6em;
				font-variant: small-caps;
				color: #00DD00;
				padding: 0 0 0 20px;
			}
		</style>
		<script src="jquery.js"></script>
		<link rel="shortcut icon" href="favicon.ico">
	</head>
	<body>
		<div class="switchwrapper">
			<div id="switch-red" class="bgswitch"></div>
			<div id="switch-yellow" class="bgswitch"></div>
			<div id="switch-orange" class="bgswitch"></div>
			<div id="switch-green" class="bgswitch"></div>
			<div id="switch-purple" class="bgswitch"></div>
			<div id="switch-blue" class="bgswitch"></div>
			<div id="switch-clear" class="bgswitch"></div>
			<div id="switch-desc"></div>
		</div>
		<script>
			var colorcodes = ["#222222","#BB0000","#AAAA00","#BB6600","#00AA00","#BB00BB","#0000BB","#775201"];
			$(document).ready(function() {
				$("#switch-red").click(function() { setColor(1); }).mouseover(function() { $("#switch-desc").text("Set Page Red"); }).mouseout(function() { $("#switch-desc").text(""); });
				$("#switch-yellow").click(function() { setColor(2); }).mouseover(function() { $("#switch-desc").text("Set Page Yellow"); }).mouseout(function() { $("#switch-desc").text(""); });
				$("#switch-orange").click(function() { setColor(3); }).mouseover(function() { $("#switch-desc").text("Set Page Orange"); }).mouseout(function() { $("#switch-desc").text(""); });
				$("#switch-green").click(function() { setColor(4); }).mouseover(function() { $("#switch-desc").text("Set Page Green"); }).mouseout(function() { $("#switch-desc").text(""); });
				$("#switch-purple").click(function() { setColor(5); }).mouseover(function() { $("#switch-desc").text("Set Page Purple"); }).mouseout(function() { $("#switch-desc").text(""); });
				$("#switch-blue").click(function() { setColor(6); }).mouseover(function() { $("#switch-desc").text("Set Page Blue"); }).mouseout(function() { $("#switch-desc").text(""); });
				$("#switch-brown").click(function() { setColor(7); }).mouseover(function() { $("#switch-desc").text("Set Page Brown"); }).mouseout(function() { $("#switch-desc").text(""); });
				$("#switch-clear").click(function() { setColor(0); }).mouseover(function() { $("#switch-desc").text("Clear Page Color"); }).mouseout(function() { $("#switch-desc").text(""); });
			});
			function setColor(c) {
				$("body").css("background-color",colorcodes[c]);
			}
		</script>
	</body>
</html>
Return