Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 5 of 5
  1. #1
    pix
    pix is offline
    New Coder
    Join Date
    May 2006
    Posts
    19
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Change a target table's background image CSS

    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.

  • #2
    Supreme Master coder! _Aerospace_Eng_'s Avatar
    Join Date
    Dec 2004
    Location
    In a place far, far away...
    Posts
    19,291
    Thanks
    2
    Thanked 1,043 Times in 1,019 Posts
    You should probably tells exactly WHERE the problem is rather than have us try to guess where it might be.
    ||||If you are getting paid to do a job, don't ask for help on it!||||

  • #3
    pix
    pix is offline
    New Coder
    Join Date
    May 2006
    Posts
    19
    Thanks
    1
    Thanked 0 Times in 0 Posts
    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.

  • #4
    Supreme Master coder! _Aerospace_Eng_'s Avatar
    Join Date
    Dec 2004
    Location
    In a place far, far away...
    Posts
    19,291
    Thanks
    2
    Thanked 1,043 Times in 1,019 Posts
    Okay try this
    Code:
          <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.
    ||||If you are getting paid to do a job, don't ask for help on it!||||

  • #5
    pix
    pix is offline
    New Coder
    Join Date
    May 2006
    Posts
    19
    Thanks
    1
    Thanked 0 Times in 0 Posts
    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?


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •