html - How to change the background upon click? -
<!doctype html public "-//w3c//dtd xhtml 1.0 transitional//en" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8" /> <title>untitled document</title> <script src="spryassets/sprycollapsiblepanel.js" type="text/javascript"></script> <script src="spryassets/spryeffects.js" type="text/javascript"></script> <link href="spryassets/sprycollapsiblepanel.css" rel="stylesheet" type="text/css" /> <script type="text/javascript"> <!-- function mm_effectappearfade(targetelement, duration, from, to, toggle) { spry.effect.dofade(targetelement, {duration: duration, from: from, to: to, toggle: toggle}); } //--> </script> </head> <body onload="mm_preloadimages('backgrounds/real main menu.png')"> <div class="collapsiblepanel" id="collapsiblepanel1"> <div class="collapsiblepaneltab" tabindex="0"> <p><center> <img src="backgrounds/main menu.png" alt="main menu" width="624" height="97" id="enter" onclick="mm_effectappearfade(this, 2000, 100, 0, false)"/> </center></p> </div> <div class="collapsiblepanelcontent"> <center> <img id="background" src="backgrounds/title.png" width="100%" height="100%" alt="the website has not loaded due internet, sorry" /> </center> <p> </p> <p> </p> </div> </div> <script type="text/javascript"> <!-- var collapsiblepanel1 = new spry.widget.collapsiblepanel("collapsiblepanel1"); //--> </script> </body> </html> that website far. have background colored black (i can :p).
however, on click of collapsible panel, background change image, more specifically, this:
background: url('backgrounds/practise.png') no-repeat center center fixed; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; background-attachment: fixed; background-image: url(backgrounds/practise.png); overflow:hidden; i've tried of methods find on site.
function mm_effectappearfade called when panel clicked, i'd include code in there.
edited code not working:
<!doctype html public "-//w3c//dtd xhtml 1.0 transitional//en" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8" /> <title>untitled document</title> <style> /*body { background: url('backgrounds/practise.png') no-repeat center center fixed; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; background-attachment: fixed; background-image: url(backgrounds/practise.png); overflow:hidden; }*/ .newbackground{ background: url('backgrounds/practise.png') no-repeat center center fixed; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; background-attachment: fixed; background-image: url(backgrounds/practise.png); overflow:hidden; } </style> <script src="spryassets/sprycollapsiblepanel.js" type="text/javascript"></script> <script src="spryassets/spryeffects.js" type="text/javascript"></script> <link href="spryassets/sprycollapsiblepanel.css" rel="stylesheet" type="text/css" /> <script type="text/javascript"> <!-- function mm_effectappearfade(targetelement, duration, from, to, toggle) { spry.effect.dofade(targetelement, {duration: duration, from: from, to: to, toggle: toggle}); } //--> </script> <script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script> </head> <script src="js/jquery.js"> $('.collapsiblepanel').click(function(){ $('body').addclass('newbackground'); }); </script> <body onload="mm_preloadimages('backgrounds/real main menu.png')"> <div class="collapsiblepanel" id="collapsiblepanel1"> <div class="collapsiblepaneltab" tabindex="0"> <p><center> <img src="backgrounds/main menu.png" alt="main menu" width="624" height="97" id="enter" onclick="mm_effectappearfade(this, 2000, 100, 0, false)"/> </center></p> </div> <div class="collapsiblepanelcontent"> <center> <img id="background" src="backgrounds/title.png" width="100%" height="100%" alt="the website has not loaded due internet, sorry" /> </center> <p> </p> <p> </p> </div> </div> <script type="text/javascript"> <!-- var collapsiblepanel1 = new spry.widget.collapsiblepanel("collapsiblepanel1"); //--> </script> </body> </html>
you can include new style in html , use jquery listen click event collapsible slider , use addclass() implement new background css.
inlcude css html so,
<style> .newbackground{ background: url('backgrounds/practise.png') no-repeat center center fixed; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; background-attachment: fixed; background-image: url(backgrounds/practise.png); overflow:hidden; } </style> and on jquery this,
$('.collapsiblepanel').click(function(){ $('body').addclass('newbackground'); });
Comments
Post a Comment