SitePoint Sponsor

User Tag List

Results 1 to 2 of 2

Hybrid View

  1. #1
    Non-Member
    Join Date
    Aug 2004
    Location
    RTP
    Posts
    1
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Question cell background rollover can't find object?

    I'm trying to get the background image of a table cell to change/rollover when you mouse over a link. This code works in IE, but in Firefox/Mozilla/Netscape it says that it can't find the object "changebg", so is there another way to pass the object's name?

    I know this can be done by calling onmouseover/out from the TD tag but I have to get it working from a link (there will be multiple links each with a different rollover image in the TD).

    The sample webpage:
    http://www.cuberis.com/rollover/tdrollover2.html

    Code:
    Code:
    <html> 
    <head> 
    <title>Change Test</title> 
    <style type="text/css"> 
    td.image { 
    background: url(intside1.jpg); 
    } 
    td.image2 { 
    background: url(intside2.jpg); 
    } 
    </style> 
    </head> 
    
    <body> 
    <table width="100" height="100"> 
    <tr> 
    <td id="changebg" name="changebg">
    <a href="#" onmouseover="changebg.className='image2'" onmouseout="changebg.className='image'">Change</a>
    </td> 
    </tr> 
    </table> 
    </body> 
    </html>
    Thanks!

  2. #2
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,556
    Mentioned
    183 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    Without knowing what you intend so this may not be suitable but you can simply swap the images with css and not use js at all.

    e.g.
    Code:
    <!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>
    <title>Untitled Document</title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <style type="text/css"> 
    #changebg { 
    background: url(http://www.cuberis.com/rollover/intside1.jpg) no-repeat left top;
    width:100px;
    height:100px;
    } 
    #changebg a{ 
    background: url(http://www.cuberis.com/rollover/intside2.jpg) no-repeat left top;
    display:block;
    width:100px;
    height:100px;
    line-height:100px;
    } 
    #changebg a:hover {background:transparent} 
    </style>
    </head>
    <body>
    <table width="100" height="100">
      <tr> 
    	<td id="changebg"> <a href="#">Change</a> </td>
      </tr>
    </table>
    </body>
    </html>
    Otherwise its really a js question which isn't my area but I would think something like this would work for modern browsers.

    Code:
    <html> 
    <head> 
    <title>Change Test</title> 
    <style type="text/css"> 
    td.image { 
    background: url(http://www.cuberis.com/rollover/intside1.jpg); 
    } 
    td.image2 { 
    background: url(http://www.cuberis.com/rollover/intside2.jpg); 
    } 
    </style> 
    </head> 
    <body> 
    <table width="100" height="100"> 
    <tr> 
    <td id="changebg" class="image">
    <a href="#" onmouseover="document.getElementById('changebg').className='image2'" onmouseout="document.getElementById('changebg').className='image'">Change</a>
    </td> 
    </tr> 
    </table> 
    </body> 
    </html>
    But you should check that code

    Paul


Bookmarks

Posting Permissions

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