Hyperlink in a cell table

amc · #11 (**permalink**) August 2nd, 2004, 03:08 PM

Yes, Imar, it works, thanks. The only think I would like to have is to swap the cursor instead of the background color (tableRow.style.backgroundColor = 'yellow'). Might you please tell me how to do it?

thanks

thanks
antonio

mehdi62b · #12 (**permalink**) August 2nd, 2004, 07:09 PM

Hi antonio,
you can do it like below(without any javascript)
----
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style>
.dr {
    height: 100%;
    width: 100%;
    cursor: hand;
}
</style>
</head>
<body>
<table width="75%" border="1">
  <tr>
    <td><a href="#" class="dr">Mehdi</a></td>
    <td><a href="#" class="dr">Mehdi</a></td>
  </tr>

</table>
</body>
</html>
----

--------------------------------------------
Mehdi.

Imar · #13 (**permalink**) August 3rd, 2004, 04:10 PM

Hi antonio,

You can modify the ChangeColor (and optionally give it a new name to reflect the new behavior) so it changes the cursor, like this:

Code:

function ChangeColor(tableRow, highLight)
    {
        if (highLight)
        {
           // tableRow.style.backgroundColor = 'yellow';
           tableRow.style.cursor = 'pointer';

        }
        else
        {
            // tableRow.style.backgroundColor = 'white';
            tableRow.style.cursor = 'default';
        }
    }
}

Mehdi: That wouldn't work, as it would just work when you hover over the content of each table cell, not the entire table row.

Cheers,

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

mehdi62b · #14 (**permalink**) August 4th, 2004, 12:49 AM

yes Imar you are right,but there is not much difference between entire table row
and entire two table cells(the difference is because of borders)
I don't think it will be a good idea when you click borders you go to other pages...
anyway if border=0 this problem would be solved.

--------------------------------------------
Mehdi.:)

Imar · #15 (**permalink**) August 4th, 2004, 01:06 AM

There *is* a big difference, and it's not just about the borders. With an <a> around the content in the cell, just the content is linked. This means that if your content is 50 pixels wide, and your table column 100px, the 50 pixels to the right of the content is not linked. You can try it out:

<table width="600" border="1">
  <tr>
    <td width="300"><a href="#">123</a></td>
    <td width="300"><a href="#">234</a></td>
  </tr>
</table>

If you view this in a browser, just 123 and 234 are linked; not the rest of the whitespace in the table.

Cheers,

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

mehdi62b · #16 (**permalink**) August 4th, 2004, 01:17 AM

Have a look at this one...(without any javascript!!!)
----
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style>
.dr {
    height: 100%;
    width: 100%;
    cursor: hand;
    border: 1px dotted #999999;
}
</style>
</head>
<body>
<table width="75%" border="0" cellpadding="0" cellspacing="0">
  <tr>
    <td ><a href="#" class="dr">mehdi</a></td>
    <td > <a href="#" class="dr">mehdi</a></td>
  </tr>

</table>
</body>
</html>
----

--------------------------------------------
Mehdi.:)

mehdi62b · #17 (**permalink**) August 4th, 2004, 01:26 AM

>>This means that if your content is 50 pixels wide, and your table column 100px, >>the 50 pixels to the right of the content is not linked. You can try it out:
why at all in this way?!!! you should not have a 100px cell for a 50px content
hope you accept it.

--------------------------------------------
Mehdi.:)

Imar · #18 (**permalink**) August 4th, 2004, 02:50 AM

Quote:

quote:why at all in this way?!!! you should not have a 100px cell for a 50px content

I am afraid I cannot accept that ;)

Suppose I have a table with a few rows. On row 1, column 1 has content that is 100 pixels wide. On row two, my content is only 50 pixels wide. Now, how wide is my entire column? 100 pixels, to accommodate for row 1. This means that in row 2 50 pixels of the table cell (next to the content) cannot be clicked as the whitespace is not hyperlinked. Other than that, for aesthetic reasons, I can also imagine a column being wider than the content it contains.
For a good example, look at the usernames of the posters on this page. There is a huge table cell, with only a small name. This means that if the name is hyperlinked, you can only click the name, and not the entire cell.

If I am not mistaken, that was the effect the OP was after. By linking the content you cannot achieve that effect; you'll need a way to link the entire cell or the entire row.

Cheers,

Imar

mehdi62b · #19 (**permalink**) August 4th, 2004, 05:21 AM

>>There is a huge table cell, with only a small name. This means that if the name >>is hyperlinked , you can only click the name, and not the entire cell.
but antonio didn't want it he wanted to act his entire cells as a HyperLink not just his Text.

--------------------------------------------
Mehdi.:)

mehdi62b · #20 (**permalink**) August 4th, 2004, 05:22 AM

Imar,please don't consider all the situation at one time,it is better to separate them
suppose two situation
1-you know exactly all the widths of your cells(for example in the cells of a column you want to put some pictures with equal widths and also equal heights ).
----
<table width="600" border="1">
  <tr>
    <td width="300"><a href="#">123</a></td>
    <td width="300"><a href="#">234</a></td>
  </tr>
  <tr>
    <td width="300"><a href="#">123</a></td>
    <td width="300"><a href="#">234</a></td>
  </tr>
</table>
-----
2-you don't know the exact widths and heights of your cells so you don't have to determine the width and height of every cell in your column.
-----
<table width="600" border="1">
  <tr>
    <td a href="#">123</a></td>
    <td a href="#">234</a></td>
  </tr>
   <tr>
    <td a href="#">123</a></td>
    <td a href="#">234</a></td>
  </tr>
</table>
-----

--------------------------------------------
Mehdi.:)

Need to download code?

Navigation