Hyperlink for whole table?? 2

[AndyB21]

Is there any way that a whole table <table> can be made into an active hyperlink?

It is a fairly simple rectangular table consisting of several rows and columns with 1x1 pixel images, with the end result being some user defined text inside an outlined box.

The users want the whole &quot;box&quot; to be clickable, and not just the text. Can this be done??

Andy.

 

[jaredn]

I don't think you can do it with plain old html. Using DHTML, in IE, it's quite easy:

<table onclick=&quot;window.location='newpage.htm'&quot;>
<thead>
...
</thead>
<tbody>
...
</tbody>
</table>

because events 'bubble up' ( see faq216-425 for more info ) from their source, this will work just fine. jared@eae.net -

http://webfx.eae.net

 

[AndyB21]

Cheers Jaredn - that works for IE as you say, but my app has to work in both of the &quot;majors&quot;. Any ideas for a NS workaround? What about some sort of active background image in the innermost data cell? I have pasted an extract of my code below.

Appreciate any help.

Andy.


>>orangedot is a 1x1 orange gif
>>sp is a 1x1 transparent gif

<!-- CCButton Start -->
<table style='Cursor:hand' OnClick='window.location = &quot;test4.html#&quot;' border=&quot;0&quot; cellpadding=&quot;0&quot; cellspacing=&quot;0&quot;>
<tr valign=&quot;top&quot;>
<td colspan=&quot;3&quot;bgcolor=&quot;#003366&quot;><table bgcolor=&quot;#cc9900&quot; border=&quot;0&quot; cellpadding=&quot;0&quot; cellspacing=&quot;0&quot; width=&quot;100%&quot; height=&quot;2&quot;><tr><td><a href=&quot;#&quot;><img src=&quot;images/orangedot.gif&quot; width=&quot;1&quot; height=&quot;1&quot; alt=&quot;&quot; border=&quot;0&quot;></a></td></tr></table></td>
</tr>
<tr bgcolor=&quot;#003366&quot;>
<td width=&quot;2&quot; bgcolor=&quot;#cc9900&quot;><img src=&quot;images/sp.gif&quot; width=&quot;1&quot; height=&quot;1&quot; alt=&quot;&quot; border=&quot;0&quot;></td>
<td width=&quot;*&quot;>
<table bgcolor=&quot;#003366&quot; border=&quot;0&quot; cellpadding=&quot;5&quot; cellspacing=&quot;0&quot; width=&quot;100%&quot; height=&quot;100%&quot;>
<tr>
<td><nobr><a class=activeButton href=&quot;#&quot;>Click here for action</a></td></nobr>
</tr>
</table>
</td>
<td width=&quot;2&quot; bgcolor=&quot;#cc9900&quot;><img src=&quot;images/sp.gif&quot; width=&quot;1&quot; height=&quot;1&quot; alt=&quot;&quot; border=&quot;0&quot;></td>
</tr>
<tr valign=&quot;bottom&quot;>
<td colspan=&quot;3&quot; bgcolor=&quot;#003366&quot;><table bgcolor=&quot;#cc9900&quot; border=&quot;0&quot; cellpadding=&quot;0&quot; cellspacing=&quot;0&quot; width=&quot;100%&quot; height=&quot;2&quot;><tr><td><img src=&quot;images/orangedot.gif&quot; width=&quot;1&quot; height=&quot;1&quot; alt=&quot;&quot; border=&quot;0&quot;></td></tr></table></td>
</tr>
</table>
<!-- CCButton End -->

 

[PepperPepsi]

Hi Andy,

try with the <ILAYER> and <LAYER> tag,

<ILAYER>
<LAYER onfocus=&quot;window.location.href='test4.html#'&quot;>
<table onclick=&quot;window.location='test4.html#'&quot;>
.....
.....
</table>
</LAYER>
</ILAYER>

This works for Netscape 4.x, but Netscape 6 may have problem cuz they ignore <ILAYER> tag

hope this helps,
Chiu Chan
WebMaster & Software Engineer
emagine solutions, inc

http://www.emagine-solutions.com

cchan@emagine-solutions.com

 

[bosully]

I know this is probably a really thick question to ask but why not simply use the anchor tags?

<table style='Cursor:hand'><a href=&quot;

http://...&quot;>

Table here

</a></table>

This works for me.

Brendan

 

[AndyB21]

That does work too (how do we always overlook the simplest solutions?), somewhat better in IE5.5 than IE 4.0 (status bar display included). No joy in NS though. What I really need is an IE/NS solution (have we heard that type of question before round here!?).

 

[Dixiedi]

I believe the only sure way you will get it to work in all versions NN is to create a transparent button with text the size of the table/cell.

 

[AndyB21]

Bring on the graphic designers then... I was using whole images before, but thought that a combination of JSP tags and tables would let me better create my &quot;buttons&quot; dynamically as and when needed rather than fire up Photoshop every time. Never mind.

Thanks for the help everybody.

 

[Zych]

Has anybody found any other solutions for this? I was going to ask the same thing. I put the anchor around the table using a onclick="window.open()" solutions which works. The only problem I have is that the arrow does not change into a hand when doing this. I am afraid some people may not think to click. I do have the href="#" in the anchor which fixes the problem if it is around text but the hand only appears on the border of the table.

I am not sure what Dixiedi means by a transparent button. But this may be a solution.

Thanks,

Zych

 

[Vragabond]

1. Do not wrap an anchor around a table. Table is a block level element while anchor is inline and that is simply wrong.

2. If you really need cursor to change, you should try changing it:

#myTable, #myTable td, #myTable th {
  cursor: pointer;
}

This assumes your table has an id set to myTable.

 

[tsdragon]

That should be:

   cursor: [red]hand[/red];

Tracy Dryden

Meddle not in the affairs of dragons,
For you are crunchy, and good with mustard.

 

[BillyRayPreachersSon]

Not it should not. It should be "cursorointer". "hand" is IE-only. "pointer" is cross-browser and works in IE as well.

Hope this helps,
Dan


[tt]D'ya think I got where I am today because I dress like Peter Pan here?[/tt]

 

[tsdragon]

If you say so, then I stand corrected.


Tracy Dryden

Meddle not in the affairs of dragons,
For you are crunchy, and good with mustard.

 

[Vragabond]

Thanks Dan.