Hyperlink in a cell table

amc · #1 (**permalink**) July 9th, 2004, 03:40 AM

I have a table with 10 rows and two columns

I would like EACH row (so 10 rows, no matter what column the mouse is over) to be a link to another page

But I can't figure out how to achieve that. May someone help please?

thanks

thanks
antonio

Shweta · #2 (**permalink**) July 9th, 2004, 06:29 AM

hello amc!!

this html help u

<table>
<tr>
  <td align="center">
    <a href="#" target="_blank">A </a>
  </td>
    <td width="76" align="center">
<a href="#" target="_blank">B </a>
  </td>
    <td width="52" align="center">
<a href="#" target="_blank">C </a>
  </td>
</tr>
<tr>
    <td align="center">
<a href="#" target="_blank">D </a>
  </td>
    <td align="center">
<a href="#" target="_blank">E </a>
  </td>
    <td align="center">
<a href="#" target="_blank">F </a>
  </td>
</tr>
</table>

just put ur link instead of # and ur text replace by A ...B ...

try this it works

--------have a nice day

amc · #3 (**permalink**) July 9th, 2004, 04:05 PM

Well, thanks, your example makes TEXT hyperlink. But I want ALL THE AREA OF THE CELL, ... more than THAT, all the area of all the cells making a row... So, if I have 10 rows and 2 columns, there are 20 cells. I want just 10 hyperlinks, one per row, covering ALL THE area of the row, not just the text.

Is it achievable. I thought on putting fictitous layers on top of each row, but the I don't know how to create an "invisible" layer, but sensitive to mouse movement....

thanks

thanks
antonio

cwebb · #4 (**permalink**) July 9th, 2004, 04:16 PM

Im not sure why you have 2 columns, when its the rows you want to link. Perhaps its a design issue, but having a single column with 10 rows makes more sense.

Regardless, what about placing a transparent gif into each row (or cell) and linking the image to the URL?

Snib · #5 (**permalink**) July 9th, 2004, 04:42 PM

How about making a <div> in each like this?

<div style="cursor:hand; width:100%; height:100%" onclick="window.location.replace('wherever.asp')"> </div>

HTH,

Snib

<><

Imar · #6 (**permalink**) July 9th, 2004, 05:30 PM

Hi antonio,

Are you looking for something like a "full row select"? If so, copy the code below to a new HTML page, open it in your browser and hover of the table rows. Whenever you click somewhere in a row, you'll be taken to another page (either 1, 2 or 3.asp).
Is this what you're after?

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
    <meta http-equiv="Content-Type" 
        content="text/html; charset=iso-8859-1" />
    <title>Full Row Select</title>
    <script type="text/javascript">
    function ChangeColor(tableRow, highLight)
    {
        if (highLight)
        {
            tableRow.style.backgroundColor = 'yellow';
        }
        else
        {
            tableRow.style.backgroundColor = 'white';
        }
    }
    function DoNav(theUrl)
    {
        document.location.href = theUrl;
    }
    </script>
</head>
<body>
<table width="100%"  border="1">
<tr onmouseover="ChangeColor(this, true);" 
        onmouseout="ChangeColor(this, false);" 
        onclick="DoNav('1.asp');">
  <td>1</td>
  <td>2</td>
  <td>3</td>
</tr>
<tr onmouseover="ChangeColor(this, true);" 
        onmouseout="ChangeColor(this, false);" 
        onclick="DoNav('2.asp');">
  <td>4</td>
  <td>5</td>
  <td>6</td>
</tr>
<tr onmouseover="ChangeColor(this, true);" 
        onmouseout="ChangeColor(this, false);" 
        onclick="DoNav('3.asp');">
  <td>7</td>
  <td>8</td>
  <td>9</td>
</tr>
</table>
</body>
</html>

HtH,

Imar
---------------------------------------
Imar Spaanjaars
Everyone is unique, except for me.
While typing this post, I was listening to: Tunic (Song for Karen) by Sonic Youth (Track 2 from the album: Goo) What's This?

amc · #7 (**permalink**) July 11th, 2004, 06:45 PM

thanks to you all

I tried the <div> solution, ... a hand appears (and it is clickable) but only in the very top of the table. How have I to exactly place the div tag, in relationship to the table, tr and td ones?

thanks

thanks
antonio

amc · #8 (**permalink**) July 12th, 2004, 07:22 PM

Regarding the other solution, placing a transparent gif.... it is another possiblity, but 2 problems arise.

1st, the tables underneath seem to move when pressing F12 (in IE) and then the layer containing the transparent gif doesn't exactly fit the row

2nd, once the mouse is over, a non-transparent gif appears (so, a solid filled rectangle),because of a default a:hover behaviour is triggered. It means that I would have to define a new hove behaviour for a new style, and then telling the system the transparent image belongs to that class. But, who is to be related to the class? The layer? I only have a layer and animage inside. There are not many choices, indeed...

thanks

thanks
antonio

Snib · #9 (**permalink**) July 12th, 2004, 07:28 PM

You should have something like this:

<table>
<tr>
<td>
  <div style='width:100%;height:100%' onclick='window.location="1.asp"'>1</div>
</td>
<td>
  <div style='width:100%;height:100%' onclick='window.location="2.asp"'>2</div>
</td>
</tr>
<tr>
<td>
  <div style='width:100%;height:100%' onclick='window.location="3.asp"'>3</div>
</td>
<td>
  <div style='width:100%;height:100%' onclick='window.location="4.asp"'>4</div>
</td>
</tr>
<tr>
<td>
  <div style='width:100%;height:100%' onclick='window.location="5.asp"'>5</div>
</td>
<td>
  <div style='width:100%;height:100%' onclick='window.location="6.asp"'>6</div>
</td>
</tr>
<tr>
<td>
  <div style='width:100%;height:100%' onclick='window.location="7.asp"'>7</div>
</td>
<td>
  <div style='width:100%;height:100%' onclick='window.location="8.asp"'>8</div>
</td>
</tr>
<tr>
<td>
  <div style='width:100%;height:100%' onclick='window.location="9.asp"'>9</div>
</td>
<td>
  <div style='width:100%;height:100%' onclick='window.location="10.asp"'>10</div>
</td>
</tr>
<tr>
<td>
  <div style='width:100%;height:100%' onclick='window.location="11.asp"'>11</div>
</td>
<td>
  <div style='width:100%;height:100%' onclick='window.location="12.asp"'>12</div>
</td>
</tr>
<tr>
<td>
  <div style='width:100%;height:100%' onclick='window.location="13.asp"'>13</div>
</td>
<td>
  <div style='width:100%;height:100%' onclick='window.location="14.asp"'>14</div>
</td>
</tr>
<tr>
<td>
  <div style='width:100%;height:100%' onclick='window.location="15.asp"'>15</div>
</td>
<td>
  <div style='width:100%;height:100%' onclick='window.location="16.asp"'>16</div>
</td>
</tr>
<tr>
<td>
  <div style='width:100%;height:100%' onclick='window.location="17.asp"'>17</div>
</td>
<td>
  <div style='width:100%;height:100%' onclick='window.location="18.asp"'>18</div>
</td>
</tr>
<tr>
<td>
  <div style='width:100%;height:100%' onclick='window.location="19.asp"'>19</div>
</td>
<td>
  <div style='width:100%;height:100%' onclick='window.location="20.asp"'>20</div>
</td>
</tr>
</table>

Is this what you have?

Snib

<><

Imar · #10 (**permalink**) July 13th, 2004, 12:55 AM

I could be mistaken, but I think the solution I posted earlier does exactly what you want.
You may need to add the cursor behavior to the onmouseover and onmouseout events, but other than that, it offers you a full row select.
Did you try it out? Did it work?

I think the good thing about it is that you don't have to change your markup. You can put whatever you want in the Td> tags, because the behavior is applied to the <tr>/

Imar
---------------------------------------
Imar Spaanjaars
Everyone is unique, except for me.

Need to download code?

Navigation