...

View Full Version : Change a target table's background image CSS



pix
09-19-2006, 09:44 PM
I have a problem changing the background image of a target table by ID referance in Firefox. The code seems to run fine in internet explorer and I'm getting a bit of a headache trying to figure out what I've missed.

Please see http://www.thorncliffe-park.co.uk/gallery.html for the problem page,
and http://www.thorncliffe-park.co.uk/styles.css for the CSS file.

Hope someone can help.

_Aerospace_Eng_
09-19-2006, 10:16 PM
You should probably tells exactly WHERE the problem is rather than have us try to guess where it might be.

pix
09-19-2006, 10:21 PM
CSS:

.picOFF {
background:url("pics/1px.gif") no-repeat;
cursor:default;}

.picON1 {
background:url("gallery/1_S.jpg") no-repeat;
cursorointer;}
.picON2 {
background:url("gallery/2_S.jpg") no-repeat;
cursorointer;}
.bigpicON1 {
background:url("gallery/1_B.jpg") no-repeat;}
.bigpicON2 {
background:url("gallery/2_B.jpg") no-repeat;}

HTML:

<table width="410" border="0" cellpadding="0" cellspacing="0">
<tr>
<td height="308" ID="thepic" class="bigpicON1"><img src="pics/1px.gif" width="1" height="1" /></td>
</tr>
</table>
<table width="410" border="0" cellpadding="0" cellspacing="0" background="gallery/bgsmall.jpg">
<tr>
<td width="82" height="82" class="picOFF" onMouseOut="this.className='picOFF';" onMouseOver="this.className='picON1'; thepic.className='bigpicON1';"><img src="pics/1px.gif" width="1" height="1"></td>
<td width="82" height="82" class="picOFF" onMouseOut="this.className='picOFF';" onMouseOver="this.className='picON2'; thepic.className='bigpicON2';"><img src="pics/1px.gif" width="1" height="1"></td>
</tr>
</table>


Hope this can help someone narrow down the problem quicker... Thanks.

_Aerospace_Eng_
09-19-2006, 10:42 PM
Okay try this

<table width="410" border="0" cellpadding="0" cellspacing="0" background="gallery/bgsmall.jpg">
<tr>
<td width="82" height="82" class="picOFF" onMouseOut="this.className='picOFF';" onMouseOver="this.className='picON1';document.getElementById('thepic').className = 'bigpicON1'"><img src="pics/1px.gif" width="1" height="1"></td>
<td width="82" height="82" class="picOFF" onMouseOut="this.className='picOFF';" onMouseOver="this.className='picON2';document.getElementById('thepic').className = 'bigpicON2'"><img src="pics/1px.gif" width="1" height="1"></td>
<td width="82" height="82" class="picOFF" onMouseOut="this.className='picOFF';" onMouseOver="this.className='picON3';document.getElementById('thepic').className = 'bigpicON3'"><img src="pics/1px.gif" width="1" height="1"></td>
<td width="82" height="82" class="picOFF" onMouseOut="this.className='picOFF';" onMouseOver="this.className='picON4';document.getElementById('thepic').className = 'bigpicON4'"><img src="pics/1px.gif" width="1" height="1"></td>
<td width="82" height="82" class="picOFF" onMouseOut="this.className='picOFF';" onMouseOver="this.className='picON5';document.getElementById('thepic').className = 'bigpicON5'"><img src="pics/1px.gif" width="1" height="1"></td>
</tr>

</table>
Reason why it worked in IE and not Firefox was IE inteprets an ID to be the same thing as a name where the correct method would be to use the document.getElementById() function.

pix
09-20-2006, 10:14 AM
That works great thanks. Dare I even ask what the heck Safari is doing with this code. It's not important, I'm just curious as to why Safari seems to fall down when trying to change the image?



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum