Wrox Programmer Forums
| Search | Today's Posts | Mark Forums Read
Welcome to the p2p.wrox.com Forums.

You are currently viewing the Dreamweaver (all versions) section of the Wrox Programmer to Programmer discussions. This is a community of software programmers and website developers including Wrox book authors and readers. New member registration was closed in 2019. New posts were shut off and the site was archived into this static format as of October 1, 2020. If you require technical support for a Wrox book please contact http://hub.wiley.com
  #1 (permalink)  
Old July 9th, 2004, 03:40 AM
amc amc is offline
Authorized User
 
Join Date: Feb 2004
Location: Barcelona, , Spain.
Posts: 27
Thanks: 0
Thanked 0 Times in 0 Posts
Default Hyperlink in a cell table

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
__________________
thanks
antonio
  #2 (permalink)  
Old July 9th, 2004, 06:29 AM
Registered User
 
Join Date: Jul 2004
Location: , , .
Posts: 6
Thanks: 0
Thanked 0 Times in 0 Posts
Default

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



  #3 (permalink)  
Old July 9th, 2004, 04:05 PM
amc amc is offline
Authorized User
 
Join Date: Feb 2004
Location: Barcelona, , Spain.
Posts: 27
Thanks: 0
Thanked 0 Times in 0 Posts
Default

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
  #4 (permalink)  
Old July 9th, 2004, 04:16 PM
Authorized User
 
Join Date: May 2003
Location: Indianapolis, IN, USA.
Posts: 34
Thanks: 0
Thanked 1 Time in 1 Post
Default

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?

  #5 (permalink)  
Old July 9th, 2004, 04:42 PM
Friend of Wrox
 
Join Date: Nov 2003
Location: , , .
Posts: 1,285
Thanks: 0
Thanked 2 Times in 2 Posts
Default

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

<><
  #6 (permalink)  
Old July 9th, 2004, 05:30 PM
Imar's Avatar
Wrox Author
Points: 70,322, Level: 100
Points: 70,322, Level: 100 Points: 70,322, Level: 100 Points: 70,322, Level: 100
Activity: 0%
Activity: 0% Activity: 0% Activity: 0%
 
Join Date: Jun 2003
Location: Utrecht, Netherlands.
Posts: 17,089
Thanks: 80
Thanked 1,576 Times in 1,552 Posts
Default

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?
  #7 (permalink)  
Old July 11th, 2004, 06:45 PM
amc amc is offline
Authorized User
 
Join Date: Feb 2004
Location: Barcelona, , Spain.
Posts: 27
Thanks: 0
Thanked 0 Times in 0 Posts
Default

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
  #8 (permalink)  
Old July 12th, 2004, 07:22 PM
amc amc is offline
Authorized User
 
Join Date: Feb 2004
Location: Barcelona, , Spain.
Posts: 27
Thanks: 0
Thanked 0 Times in 0 Posts
Default

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
  #9 (permalink)  
Old July 12th, 2004, 07:28 PM
Friend of Wrox
 
Join Date: Nov 2003
Location: , , .
Posts: 1,285
Thanks: 0
Thanked 2 Times in 2 Posts
Default

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

<><
  #10 (permalink)  
Old July 13th, 2004, 12:55 AM
Imar's Avatar
Wrox Author
Points: 70,322, Level: 100
Points: 70,322, Level: 100 Points: 70,322, Level: 100 Points: 70,322, Level: 100
Activity: 0%
Activity: 0% Activity: 0% Activity: 0%
 
Join Date: Jun 2003
Location: Utrecht, Netherlands.
Posts: 17,089
Thanks: 80
Thanked 1,576 Times in 1,552 Posts
Default

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.




Similar Threads
Thread Thread Starter Forum Replies Last Post
How to associate table rows with hyperlink?[READ] user0b PHP How-To 1 July 30th, 2008 04:20 AM
How to create a Hyperlink based on Cell Contents chatguy Excel VBA 4 October 15th, 2007 09:43 PM
layers in table cell dearmisskat HTML Code Clinic 12 March 10th, 2007 04:46 AM
reading from a table cell? Atomsk Access VBA 2 September 28th, 2006 07:46 AM





Powered by vBulletin®
Copyright ©2000 - 2020, Jelsoft Enterprises Ltd.
Copyright (c) 2020 John Wiley & Sons, Inc.