50 users online (1 members and 49 guests)  


  Results 1 to 2 of 2

Related

  1. Replies: 3
  2. background image    Forum: HTML Forum
    Replies: 9
  3. td background image    Forum: CSS Forum
    Replies: 3
  4. Background image    Forum: HTML Forum
    Replies: 4
  5. Can't get image to set as background    Forum: HTML Forum
    Replies: 4
  1. #1
    marklse's Avatar
    New User

    Status
    Offline
    Join Date
    Jun 2004
    Posts
    1

    TD background image as link

    Hi all - HELP

    I'm trying to set a background image in a table cell which I've managed to do with the following script

    <style type="text/css">
    td{background:#DEE url(gfx/rollover_butt_blue_blank.jpg);width:400px;height:300px;}
    </style>

    <table>
    <tr>
    <td
    onmouseover="this.style.background='#DEE url(gfx/butt_blue_blank.jpg)';"
    onmouseout="this.style.background='#DEE url(gfx/rollover_butt_blue_blank.jpg)';">
    </td>
    </tr>
    </table>

    <div style="background-image:url(gfx/rollover_butt_blue_blank.jpg);position:absolute;visibility:hidden;"></div>

    Ehat I want though is for the table cell background image to act as a link and when the mouse passes over it triggers two events

    1.The rollover image that I already have
    2.Another image on the page also performs a rollover function

    Thanks all

  2. #2
    coothead's Avatar
    bald headed old fart

    Status
    Offline
    Join Date
    Aug 2003
    Location
    chertsey, a small town 25 miles south west of london, england.
    Posts
    732
    Hi there marklse,

    and a warm welcome to these forums

    I am assuming that you require the hidden <div> to be visible
    on the <td> mouseover. If so here is a little script...
    Code:
    <html>
    <head>
    
    <style type="text/css">
    td {
         background:#DEE url(gfx/rollover_butt_blue_blank.jpg);
         width:400px;
         height:300px;
     }
    #hiddenDiv {
         background:url(gfx/rollover_butt_blue_blank.jpg);
         width:400px;
         height:300px;
         position:absolute;
         visibility:hidden;
     }
    </style>
    
    <script type="text/javascript">
    
    function rollOver(el,col,over,out) {
         el.style.background=col+' url('+over+')';
         document.getElementById('hiddenDiv').style.visibility='visible';
         
    document.onmouseout= function() {
    
         el.style.background=col+' url('+out+')';
         document.getElementById('hiddenDiv').style.visibility='hidden';
      }
     }
    </script>
    
    </head>
    <body>
    
    <table><tr>
    <td onmouseover="rollOver(this,'#DEE','gfx/butt_blue_blank.jpg','gfx/rollover_butt_blue_blank.jpg')"></td>
    </tr></table>
    
    <div id="hiddenDiv"></div>
    
    </body>
    </html>
    
    If I have assumed incorrectly, let us know and we will try again

    coothead



Tags for this Thread