I'm looking to have the background color of my content attribute fade to another color upon the user clicking a color which is an image.
I assume I am going about this all the wrong way and would be grateful for any help.
I hope I post this correctly. Apologies if not. I've been a browser for a long time and have only now decided to register.
http://jsfiddle.net/WhiteSlevin7/LAcFa/9/
<body>
<div id ="wrapper">
<section id ="logo">
</section>
<section id ="header">
</section>
<div id="accessibility">
<ul>
<li><a data-color-id="1" href="#"><img src="images/red-color.jpg"></a></li>
<li><a data-color-id="2" href="#"><img src="images/blue-color.jpg"></a></li>
<li><a data-color-id="3" href="#"><img src="images/grey-color.jpg"></a></li>
<li><a data-color-id="4" href="#"><img src="images/purple-color.jpg"></a></li>
</ul>
</div>
<section id="content">
<article>
</article>
</section>
</div>
a{
color: #ffffff;
text-decoration: none;
font-size: 85%;
border: 0;
}
a:hover{
color: #000000;
font-size: 85%;
}
#header{
height: 170px;
background: url(images/banner.jpg) no-repeat center ;
padding: 0px;
}
#logo{
height: 109px;
background: #9bbdc7 url(images/logo.jpg) no-repeat center;
border-style: none;
padding: 0px;
}
#accessibility li {
float: left;
padding: 0 20px 0 0;
list-style: none;
}
#accessibility li a {
color: #CFCFCF;
font-size: 16px;
font-weight: bold;
text-decoration: none;
transition: all 0.2s linear;
-webkit-transition: all 0.2s linear;
-moz-transition: all 0.2s linear;
}
#wrapper {
width: 960px;
margin: 10px auto;
text-align:left;
min-width: auto;
}
#content {
width: 100%;
background: #eff6f4;
float: left;
transition: background 4s linear;
-webkit-transition: background 4s linear;
-moz-transition: background 4s linear;
}
article{
background: #f9f6f6;
border: 1px solid black;
padding: 20px;
margin-bottom:10px;
margin-top:10px;
}
function changeBg(currentItem) {
var bg = 'null';
currentItem = Number(currentItem)
switch (+currentItem) {
case 1 :
bg = '#9CC8BC';
break;
case 2 :
bg = '#9CA7C8';
break;
case 3 :
bg = '#C8BC9C';
break;
case 4 :
bg = '#C89CBD';
break;
default :
bg = '#eff6f4';
}
$('#content').css('background', bg);
}
jQuery('#accessibility li a').bind('click', function() {
changeBg(this.id);
return false;
});