changing background image
Hello all,
I can't understand why this is not working. I want the background-image to change when you click on certain elements.
CSS
-
#imageCrop {
background-image: url(bg2.jpg);
position: absolute;
z-index: 0;
top: 0;
left: 0;
height: 100%;
width: 100%;
overflow: hidden;}
#fullBG {
position: relative;
height: 100%;
width: 100%;
visibility: hidden;}
#image-one{
border: none;}
#image-two{
border: none}
HTML/jQuery:
-
<script type="text/javascript" src="jquery-1.3.1.js"></script>
<script type="text/javascript">
$('td#image-one').click(function(){
$('#imageCrop').css('backgroundImage','url('bg3.jpg')');
})
$('td#image-two').click(function(){
$('#imageCrop').css('backgroundImage','url('bg2.jpg')');
})
</script>
</head>
<body>
<table class="subNav" cellpadding="8px" cellspacing="5px" border="0px">
<tr>
<td id="image-one">
<img src="test.gif">
</td>
<td id="image-two">
<img src="test2.gif">
</td>
Any ideas?
--TSG