 |
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
|
|
|
July 9th, 2004, 03:40 AM
|
|
Authorized User
|
|
Join Date: Feb 2004
Location: Barcelona, , Spain.
Posts: 27
Thanks: 0
Thanked 0 Times in 0 Posts
|
|
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
|
July 9th, 2004, 06:29 AM
|
|
Registered User
|
|
Join Date: Jul 2004
Location: , , .
Posts: 6
Thanks: 0
Thanked 0 Times in 0 Posts
|
|
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
|
July 9th, 2004, 04:05 PM
|
|
Authorized User
|
|
Join Date: Feb 2004
Location: Barcelona, , Spain.
Posts: 27
Thanks: 0
Thanked 0 Times in 0 Posts
|
|
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
|
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
|
|
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?
|
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
|
|
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
<><
|
July 9th, 2004, 05:30 PM
|
 |
Wrox Author
Points: 70,322, Level: 100 |
|
|
Join Date: Jun 2003
Location: Utrecht, Netherlands.
Posts: 17,089
Thanks: 80
Thanked 1,576 Times in 1,552 Posts
|
|
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?
|
July 11th, 2004, 06:45 PM
|
|
Authorized User
|
|
Join Date: Feb 2004
Location: Barcelona, , Spain.
Posts: 27
Thanks: 0
Thanked 0 Times in 0 Posts
|
|
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
|
July 12th, 2004, 07:22 PM
|
|
Authorized User
|
|
Join Date: Feb 2004
Location: Barcelona, , Spain.
Posts: 27
Thanks: 0
Thanked 0 Times in 0 Posts
|
|
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
|
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
|
|
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
<><
|
July 13th, 2004, 12:55 AM
|
|
Wrox Author
Points: 70,322, Level: 100 |
|
|
Join Date: Jun 2003
Location: Utrecht, Netherlands.
Posts: 17,089
Thanks: 80
Thanked 1,576 Times in 1,552 Posts
|
|
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
