Using jQuery to change body bg image on <li> mouse over
I am trying to get the body bg image to refresh on a new <li> mouseover. I am writing out the code dynamically from a MySQL DB through PHP. When I write the following code out I only get 1 bg image on the first <li> mouseover:
<ul d="Lmenu">
<script>
$('.chgbg').hover(function(){
$('body').css("background", "url('includes/css/images/bg/1.jpg')");
});
</script>
<li class="chgbg">
<a class="color1 fancybox" href="#Rterm1" title="ubiquity" ></a></li>
<div id="Rterm1" style="width:200px;display:none;">
<a class="fancybox" href="#Rabstract1" title="ubiquity" >Abstract</a><br />
<a class="fancybox" href="#Rdesc1" title="ubiquity" >Article</a><br />
<a class="fancybox" href="#Rcorrelation1" title="ubiquity" >Correlation</a><br />
<a class="fancybox" href="#Rinverse1" title="ubiquity" >Inverse</a><br />
<a class="fancybox" href="#Rhelp1" title="ubiquity" >Help</a><br />
</div>
<div id="Rabstract1" style="width:400px;display:none;"><p>Creativity:as-one : at-once-linguistic "taper" of hypothetical development from the cumulative persistence of unfolding presence in the present.</p><p><a class="fancybox" href="#Rterm1" title="ubiquity" >Back</a></p></div>
<div id="Rdesc1" style="width:400px;display:none;"><p>This speaks to the philosophical "umbrella" under which the bearing / orientation of identity is kept out of the extemporaneous downpour of data.
(For interactive words use [hidden] coding:<a class="fancybox" href="#ref1">link</a>)</p><p><a class="fancybox" href="#Rterm1" title="ubiquity" >Back</a></p></div>
<div id="Rcorrelation1" style="width:400px;display:none;"><p>spontaneous contenuity</p><p><a class="fancybox" href="#Rterm1" title="ubiquity" >Back</a></p></div>
<div id="Rinverse1" style="width:400px;display:none;"><p>ubiety: be(com)ing in the here : now</p><p><a class="fancybox" href="#Rterm1" title="ubiquity" >Back</a></p></div>
<div id="Rhelp1" style="width:400px;display:none;"><p>Help text. Help text. Help text.</p><p><a class="fancybox" href="#Rterm1" title="ubiquity" >Back</a></p></div>
<script>
$('.chgbg').hover(function(){
$('body').css("background", "url('includes/css/images/bg/2.jpg')");
});
</script>
<li class="chgbg">
<a class="color2 fancybox" href="#Rterm2" title="spontaneity" ></a></li>
. . . . and so forth
Then I wrote the following code out to have sequentially numbered chgbg classes and then I get no bg images on <li> mouseovers:
<ul id="Lmenu">
<script>
$('.chgbg1').hover(function(){
$('body').css("background", "url('includes/css/images/bg/1.jpg')");
});
</script>
<li class="chgbg1">
<a class="color1 fancybox" href="#Rterm1" title="ubiquity" ></a></li>
<div id="Rterm1" style="width:200px;display:none;">
<a class="fancybox" href="#Rabstract1" title="ubiquity" >Abstract</a><br />
<a class="fancybox" href="#Rdesc1" title="ubiquity" >Article</a><br />
<a class="fancybox" href="#Rcorrelation1" title="ubiquity" >Correlation</a><br />
<a class="fancybox" href="#Rinverse1" title="ubiquity" >Inverse</a><br />
<a class="fancybox" href="#Rhelp1" title="ubiquity" >Help</a><br />
</div>
<div id="Rabstract1" style="width:400px;display:none;"><p>Creativity:as-one : at-once-linguistic "taper" of hypothetical development from the cumulative persistence of unfolding presence in the present.</p><p><a class="fancybox" href="#Rterm1" title="ubiquity" >Back</a></p></div>
<div id="Rdesc1" style="width:400px;display:none;"><p>This speaks to the philosophical "umbrella" under which the bearing / orientation of identity is kept out of the extemporaneous downpour of data.
(For interactive words use [hidden] coding:<a class="fancybox" href="#ref1">link</a>)</p><p><a class="fancybox" href="#Rterm1" title="ubiquity" >Back</a></p></div>
<div id="Rcorrelation1" style="width:400px;display:none;"><p>spontaneous contenuity</p><p><a class="fancybox" href="#Rterm1" title="ubiquity" >Back</a></p></div>
<div id="Rinverse1" style="width:400px;display:none;"><p>ubiety: be(com)ing in the here : now</p><p><a class="fancybox" href="#Rterm1" title="ubiquity" >Back</a></p></div>
<div id="Rhelp1" style="width:400px;display:none;"><p>Help text. Help text. Help text.</p><p><a class="fancybox" href="#Rterm1" title="ubiquity" >Back</a></p></div>
<script>
$('.chgbg2').hover(function(){
$('body').css("background", "url('includes/css/images/bg/2.jpg')");
});
</script>
<li class="chgbg2">
Can anyone help? View the site at:
http://omnicentricity.com/ui/