htmlonclickbackground-imagespry

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 properly due to your internet, sorry" />
    </center>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
  </div>
</div>
<script type="text/javascript">
<!--
var CollapsiblePanel1 = new Spry.Widget.CollapsiblePanel("CollapsiblePanel1");
//-->
</script>
</body>
</html>

That is my website so far. I would like to have the background colored black (I can do that :P).

However, on click of the collapsible panel, I would like the background to change to an image, more specifically, to 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 all of the methods I could find on this site.
The function MM_effectAppearFade is called when the panel is clicked, so I'd like to include the 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 properly due to your internet, sorry" />
    </center>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
  </div>
</div>
<script type="text/javascript">
<!--
var CollapsiblePanel1 = new Spry.Widget.CollapsiblePanel("CollapsiblePanel1");
//-->
</script>
</body>
</html>
Solution

  • You can include your new style in your html and use jquery to listen to the click event to the collapsible slider and then use addClass() to implement your new background css.

    Inlcude the css to your html like 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 then on your jquery do like this,

    $('.CollapsiblePanel').click(function(){

$('body').addClass('newBackground');


});