71 users online (0 members and 71 guests)  

> > > > TD background image as link

  Results 1 to 2 of 2

Related

  1. Having trouble adding top image over background image    Forum: Myspace Forum
    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. 06-29-2004, 12:42 PM #1
    marklse
    marklse is offline
    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
    Reply With Quote Reply With Quote
  2. 06-29-2004, 03:40 PM #2
    coothead
    coothead is offline
    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
    740
    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


    Reply With Quote Reply With Quote
« Previous Thread | Next Thread »

Tags for this Thread