Thread: TD background image as link
Results 1 to 2 of 2
Related
-
Having trouble adding top image over background image Forum: Myspace Forum
Replies: 3 -
background image Forum: HTML Forum
Replies: 9 -
td background image Forum: CSS Forum
Replies: 3 -
Background image Forum: HTML Forum
Replies: 4 -
Can't get image to set as background Forum: HTML Forum
Replies: 4
-
06-29-2004, 12:42 PM #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
-
06-29-2004, 03:40 PM #2bald headed old fart
Status- Offline
Join Date- Aug 2003
Location- chertsey, a small town 25 miles south west of london, england.
Posts- 739
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>
coothead
Cloudjiffy- PaaS for Developers
10-05-2020, 12:30 AM in Web Hosting Forum