Solved

Table Cell As A Link

Posted on 2004-04-28
14
3,926 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
3 Use Cases for Connected Systems

Our Dev teams are like yours. They’re continually cranking out code for new features/bugs fixes, testing, deploying, testing some more, responding to production monitoring events and more. It’s complex. So, we thought you’d like to see what’s working for us.

 
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
 

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

Master Your Team's Linux and Cloud Stack!

The average business loses $13.5M per year to ineffective training (per 1,000 employees). Keep ahead of the competition and combine in-person quality with online cost and flexibility by training with Linux Academy.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

"In order to have an organized way for empathy mapping, we rely on a psychological model and trying to model it in a simple way, so we will split the board to three section for each persona and a scenario and try to see what those personas would Do,…
Any business that wants to seriously grow needs to keep the needs and desires of an international audience of their websites in mind. Making a website friendly to international users isn’t prohibitively expensive and can provide an incredible return…
The viewer will learn how to dynamically set the form action using jQuery.
The viewer will get a basic understanding of what section 508 compliance can entail, learn about skip navigation links, alt text, transcripts, and font size controls.

825 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