javascript - Change the background color of an attribute of CSS by the click of an image -
i'm looking have background color of content attribute fade color upon user clicking color image.
i assume going wrong way , grateful help.
i hope post correctly. apologies if not. i've been browser long time , have decided 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 { color: #cfcfcf; font-size: 16px; font-weight: bold; text-decoration: none; transition: 0.2s linear; -webkit-transition: 0.2s linear; -moz-transition: 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); homecoming false; });
issues: (1) wrap event handler within ready(). (2) set style valid element, #content.
working code: live demo
html
<div id ="wrapper"> <section id ="logo"></section> <section id ="header"></section> <div id="accessibility"> <ul> <li><a id="1" href="#"><img src="images/red-color.jpg"></a></li> <li><a id="2" href="#"><img src="images/blue-color.jpg"></a></li> <li><a id="3" href="#"><img src="images/grey-color.jpg"></a></li> <li><a id="4" href="#"><img src="images/purple-color.jpg"></a></li> </ul> </div> <section id="content"> <article> </article> </section> </div> script
function changebg(currentitem) { var bg = 'null'; 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(document).ready(function() { jquery('#accessibility li a').on('click', function() { changebg(this.id); homecoming false; }); }); javascript jquery css switch-statement
No comments:
Post a Comment