FRIHOST • FORUMS • FAQ • TOS • BLOGS • DIRECTORY
You are invited to Log in or Register a Frihost Account!

Making a table a link.

   Frihost Forum Index -> Scripting -> Html, CSS and Javascript
 


cr3ativ3
I am trying to make these table cells I have links without ruining the background image rollover effect I created I have seen numerous tutorials on making a table cell a link and for the most part they work but once I add the block element to them the background images of the tables disapear here is my code for the page I am working on:

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>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>[Title]</title>
<STYLE type="text/css">
<!--
td.nav {
background-image:url('images/navb.PNG')
}

td.nav:hover {
background-image:url('images/navbover.PNG')
}
-->
</STYLE>
</head>

<body>
<table width="744" align="center" height="114" border="0" cellspacing="0" cellpadding="0">
  <tr>
    <td align="center" valign="middle" background="images/header.PNG"><font size="20" face="Arial, Helvetica, sans-serif"><b>[Site Title] </b></font></td>
  </tr>
</table>
<table align="center" width="758" border="0" cellspacing="8" cellpadding="0" class="nav">
  <tr>
    <td class="nav" id="nav" width="142" height="39" align="center" valign="middle">[Nav Button 1]</td>
    <td class="nav" id="nav" width="142" height="39" align="center" valign="middle">[Nav Button 2]</td>
    <td class="nav" id="nav" width="142" height="39" align="center" valign="middle">[Nav Button 3]</td>
    <td class="nav" id="nav" width="142" height="39" align="center" valign="middle">[Nav Button 4]</td>
    <td class="nav" id="nav" width="142" height="39" align="center" valign="middle">[Nav Button 5]</td>
  </tr>
</table>
<table width="744" align="center" border="0" cellspacing="0" cellpadding="0">
  <tr>
    <td valign="bottom" align="right"><img src="images/corner1.PNG" /></td>
    <td height="12"><img src="images/top.PNG" width="100%" height="100%" /></td>
<td valign="bottom" align="left"><img src="images/corner2.PNG" /></td>
  </tr>
  <tr>
    <td background="images/left.PNG" valign="bottom" align="right"></td>
    <td background="images/bg.PNG" width="100%" height="100%"><div align="center">
      <p><strong><span class="style2">[Title]</span></strong></p>
      <p align="left">[Content]</p>
    </div></td>
    <td background="images/right.PNG" valign="bottom" align="left"></td>
  </tr>
  <tr>
<td valign="top" align="right"><img src="images/corner3.PNG" /></td>
    <td height="12"><img src="images/bottom.PNG" width="100%" height="100%" /></td>
<td valign="top" align="left"><img src="images/corner4.PNG" /></td>
  </tr>
</table>



</body>
</html>




I was hoping someone could show me how to make the table cells in the nav bar links. If you want a more visual example of this page visit: http://www.mrwebbsclass.com/templatefinale.html I just want it so the table cells are links.

Thanks
Mosquito.Tyler
Well, first of all, you should check your attributes, see if you can consolidate any un-needed HTML attributes, and use some CSS instead, that way you are in compliance to the W3C XHTML 1.0 Transitional specs.

Also, for turning the cells into links, you could use a little JavaScript.

Like this.

Code:

<table>
  <tr>
    <td onclick="location.href='http://www.hon.frih.net';">[Nav Button 1]</td>
    <td onclick="location.href='http://www.hon.frih.net';">[Nav Button 2]</td>
    <td onclick="location.href='http://www.hon.frih.net';">[Nav Button 3]</td>
    <td onclick="location.href='http://www.hon.frih.net';">[Nav Button 4]</td>
    <td onclick="location.href='http://www.hon.frih.net';">[Nav Button 5]</td>
  </tr>
</table>


Of course you would change the http://hon.frih.net to whichever site you want, All you buttons going to my site wouldn't do you much good.

I hope I helped!
cr3ativ3
Thanks so much yes it worked I think I should get it to display the hand so it looks like a link but I can do that with some css I know.
cr3ativ3
Ok ya I just found, at my school that the rollover and links don't work with ie6 is there anything I can do to get this working in ie6 because most of the users of this site will be using ie6.
Mosquito.Tyler
I'm pretty sure that if youuse JavaScript to make your rollover effects and linking effects that it will work in IE6.

In combination with the little Javascript linking code I posted before, Study
THIS at W3schools. It will show you how to animate rollovers with Javascript.

Again, I'm fairly certain it will work in IE6.

Good luck.
cr3ativ3
Strange... Maybe the browsers at my school do not have Jscript enabled it possible because the computers are on a networked and you are limited in what you can do on the computers without admin privilages.

Thanks Once Again
Reply to topic    Frihost Forum Index -> Scripting -> Html, CSS and Javascript

FRIHOST HOME | FAQ | TOS | ABOUT US | CONTACT US | SITE MAP
© 2005-2007 Frihost, forums powered by phpBB.