Solved

Table Cell As A Link

Posted on 2004-04-28
14
3,924 Views
Last Modified: 2010-05-18
Hi,
I have a table with each cell set to highlight on mouseOver. How do I make an entire cell as a link?

Thanks
Seb
0
Comment
Question by:RythemRebel
  • 4
  • 2
  • 2
  • +5
14 Comments
 
LVL 10

Expert Comment

by:D_M_D
ID: 10942787
Put your <a> tag before the <td> tag like this...

<table><tr>
<a href="somelink.asp"><td>Link Here</td></a>
</tr>
<a href="somelink.asp"><td>Link Here</td></a>
</tr></table>

--------
D_M_D
0
 
LVL 36

Expert Comment

by:Zyloch
ID: 10943058
To add on to D_M_D, you should define a class for A in your stylesheet like:

a.tablecell {color:blue;background-color:white;}
a.tablecell:link {color:blue;background-color:white;}
a.tablecell:hover {color:blue;background-color:black;}

etc.etc.

This should work better because if I remember correctly, IE only knows how to support hover on a hyperlink and not on a table cell.

--Zyloch
0
 

Author Comment

by:RythemRebel
ID: 10943261
D_M_D's answer works, but when I place the cursor over the cell, the hand doesn't appear untill you click on it.
0
 
LVL 15

Expert Comment

by:Daydreams
ID: 10943366
D-M_D is correct, I just added a hover to make that clear, and added cursor:pointer to the td:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
   "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>td link hover</title>
<style type="text/css">
td {border:1pt #000 solid;cursor:pointer;}
 a:link    {color:orange;text-decoration: none;}
 a:visited {color:green;text-decoration: none;}
 a:hover   {background-color:yellow;text-decoration: none;}
</style>
</head>
<body>
<table><tr>
<td><a href="somelink.html">Click here</a></td></tr>
<table
</body>
</html>
0
 

Author Comment

by:RythemRebel
ID: 10943934
That's what I need, thank you Daydreams. However, it applys the effect to all the cells on my webpage. I don't want this to happen. How would I apply the effect to specific cells.
0
 
LVL 15

Expert Comment

by:Daydreams
ID: 10944155
Hi RythemRebel,

You can apply a class to those links that you would like to change. In the example below I also added another table without the link styling. Also, I forgot to add "display:block;" to the links styles (so the entire cell is a clickable link). Here it is with that added:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
   "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>td link hover</title>
<style type="text/css">
td {border:1pt #000 solid;cursor:pointer;}
.nohand {cursor: default;}
a:link    {color:orange;text-decoration: none;display:block;}
a:visited {color:green;text-decoration: none;display:block;}
a:hover   {background-color:yellow;text-decoration:none;display:block;}

a.morestyle:link {color:red;}
a.morestyle:visited {color:green;}
a.morestyle:hover  {background-color:pink;}

</style>
</head>
<body>
<table><tr>
<td><a href="somelink.html">Click here</a></td></tr>
<tr>
<td><a class="morestyle" href="somelink.html">This link has a different style</a></td></tr>
</table>

<table><tr>
<td class="nohand">This cell is not a link and does not have the "hand" pointer </td></tr>
</table>
</body>
</html>
0
 
LVL 14

Accepted Solution

by:
dfu23 earned 100 total points
ID: 10944668
alternate solution...

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
   "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>td link hover</title>
<style type="text/css">
td.clickable {
    background: orange;
    color: red;
    cursor: pointer;
}
</style>
</head>
<body>
<table><tr>
<td onclick="location.href='somelink.htm';" onmouseover="this.className='clickable';" onmouseout="this.className='';">Click here</td></tr>
<tr>
<td onclick="location.href='somelink.htm';" onmouseover="this.className='clickable';" onmouseout="this.className='';">This link has a different style</td></tr>
</table>

<table><tr>
<td>This cell is not a link and does not have the "hand" pointer </td></tr>
</table>
</body>
</html>
0
IT, Stop Being Called Into Every Meeting

Highfive is so simple that setting up every meeting room takes just minutes and every employee will be able to start or join a call from any room with ease. Never be called into a meeting just to get it started again. This is how video conferencing should work!

 

Author Comment

by:RythemRebel
ID: 10948237
I found dfu23's answer works best for me, thank you.

I'de also like to thank everyone else who helped me.
0
 

Author Comment

by:RythemRebel
ID: 10964969
Just thought I'de let you all know where and how I used this effect I required ^_^

http://www.djsilver.co.uk/index.htm
0
 
LVL 1

Expert Comment

by:daverb70
ID: 11084515
I just found the following site which has quite a few different CSS menus/lists:

http://css.maxdesign.com.au/listamatic

the following seems to achieve your goals.

http://css.maxdesign.com.au/listamatic/experimental02.htm

I'd recommend using CSS rather than javascript which can cause problems.

Dave
0
 

Expert Comment

by:StuartHarris
ID: 11101328
A really simple way of doing this (And imho PROPERLY) in CSS is to do something along the lines of..

 (inside <head> tags)
<style type="text/css">
<!--
   td a.fullcell { width: 100%; height: 100%}
-->
</style>

(inside <td> tags)
<td><a class="fullcell" href="/some/link.html">Some Link</a></td>

the reason why i prepended td before the 'a.fullcell' above is INCASE you put that outside of the <td> tag.. it'd make a very large clickable area ;)
0
 

Expert Comment

by:Ashley_04
ID: 11148544
Hi! This is so ASAP.  I have a sub procedure that writes html tags in an asp.net page but it's not working.  Really need help!  See my code below.

<script language="vb" runat="server">
 
Dim i As Integer =  0

Sub abc(ByVal a As Object, ByVal e As EventArgs)
      
i = i + 1
 
Response.Write("hell " + i.ToString())
writeBlankLine()
             
End Sub
 
</script>


Here's the HTML

<script runat=server>
sub writeBlankLine()
</script>

<table style="WIDTH: 992px; HEIGHT: 196px" cellSpacing="0" cellPadding="0" width="992" border="2" GRIDX="10" id="Trow1">
<tr>
<td>
<table cellSpacing="0" cellPadding="0" width="740" GRIDX="10">
<tr>
<td style="WIDTH: 29px">&nbsp;<asp:label id="Label38" runat="server" Width="56px">Item No</asp:label></td>
<td>&nbsp;<asp:label id="Label37" runat="server">Pieces</asp:label></td>
<td><asp:textbox id="TextBox18" runat="server" Width="104px"></asp:textbox></td>
<td>&nbsp;&nbsp;&nbsp;&nbsp;<asp:label id="Label39" runat="server">U/Meas</asp:label></td>
<td>&nbsp;<asp:textbox id="TextBox19" runat="server" Width="80px"></asp:textbox></td>
<td>&nbsp;&nbsp;&nbsp;
<asp:label id="Label40" runat="server" Width="64px">Unit Price</asp:label></td>
<td>&nbsp;
<asp:textbox id="TextBox22" runat="server" Width="136px"></asp:textbox></td>
</tr>
</table>
<script runat=server>
end sub
</script>
                        
0
 
LVL 14

Expert Comment

by:dfu23
ID: 11151448
I believe the appropriate response to Ashley_04's comment is:

Ask this in a new question.
0
 

Expert Comment

by:Ashley_04
ID: 11167570
Sorry.  =(
0

Featured Post

6 Surprising Benefits of Threat Intelligence

All sorts of threat intelligence is available on the web. Intelligence you can learn from, and use to anticipate and prepare for future attacks.

Join & Write a Comment

Uploading files to the web server has become common part of almost any kind of web application. People use different technologies to solve this, but regardless of the technology used, it is always useful to have some kind of progress indicator shown…
Envision that you are chipping away at another e-business site with a team of pundit developers and designers. Everything seems, by all accounts, to be going easily.
The viewer will learn how to dynamically set the form action using jQuery.
This tutorial will teach you the core code needed to finalize the addition of a watermark to your image. The viewer will use a small PHP class to learn and create a watermark.

758 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

22 Experts available now in Live!

Get 1:1 Help Now