• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 204
  • Last Modified:

How to make entire table a link ?

Hi,

I have a table where a different image is loaded in each cell(all images have equal sizes in pixels width x heigth), and I want this table to be a link, like

<html>
<body bgcolor="#FFFFFF" text="#000000">
<a href = "http://www.experts-exchange.com">
     <table border="0" cellspacing="0" cellpadding="0">
     
       <tr>
          <td><img src="img0.jpg"></td>
          <td><img src="img1.jpg"></td>
       </tr>
       <tr>
          <td><img src="img2.jpg"></td>
          <td><img src="img3.jpg"></td>
       </tr>
       <tr>
          <td><img src="img4.jpg"></td>
          <td><img src="img5.jpg"></td>
       </tr>
     </table>
</a>
</body>
</html>

Problem 1:
In IE5 & NN4.x this does not work as a link - the cursor does not change onmouseover and nothing happens onclick.
In NN 6.x & Opera it works fine. Haven't tested with IE6.

Problem 2:
In NN 6.x there is an ugly border around the images, although I specified
border="0" cellspacing="0" cellpadding="0"
This only happens if the table is surrounded by
<a href = ...> ... </a>, no border otherwise.

Please advice how to solve these problems, I want the entire table to be a link, not each cell(image) separately.

Thanks
0
peterned
Asked:
peterned
  • 4
  • 3
  • 2
  • +2
1 Solution
 
COBOLdinosaurCommented:
There is no way you are going to get it to ork in Netscrap 4.  For the rest, this should do it:

<table border="0" cellspacing="0" cellpadding="0" style="cursor:hand"
 onClick="window.location.href="http://www.experts-exchagne.com'">

<tr>
<td><img src="img0.jpg"></td>
<td><img src="img1.jpg"></td>
</tr>
<tr>
<td><img src="img2.jpg"></td>
<td><img src="img3.jpg"></td>
</tr>
<tr>
<td><img src="img4.jpg"></td>
<td><img src="img5.jpg"></td>
</tr>
</table>

Cd&
0
 
EricWestboCommented:
Although the above might not work with earlier browsers, both Navigator 4.0 and Explorer 4.0 recognize the SPAN and STYLE tags to specification... therefore, with a little finesse, we can rework COBOL's table as follows:


<span  style="cursor:hand"
onClick="window.location.href='http://www.experts-exchange.com'">

<table border="0" cellspacing="0" cellpadding="0">

<tr>
<td><img src="http://www.experts-exchange.com/images/email.gif"></td>
<td><img src="http://www.experts-exchange.com/images/email.gif"></td>
</tr>
<tr>
<td><img src="http://www.experts-exchange.com/images/email.gif"></td>
<td><img src="http://www.experts-exchange.com/images/email.gif"></td>
</tr>
<tr>
<td><img src="http://www.experts-exchange.com/images/email.gif"></td>
<td><img src="http://www.experts-exchange.com/images/email.gif"></td>
</tr>
</table>

</span>


And that should do it!
0
 
Bit_TwiddlerCommented:
It might be a little primative but why not just make each image in the table a hyperlink that points to the same URL.


tr>
<td><a href"http://www.experts-exchange.com"><img border="0" src="img0.jpg"></a></td>
<td><a href="http://www.experts-exchange.com"><img  border="0"src="img1.jpg"></a></td>
</tr>
<tr>
<td><a href="http://www.experts-exchange.com"><img  border="0" src="img2.jpg"></a></td>
<td><<a href="http://www.experts-exchange.com"><img border="0"  src="img3.jpg"></a></td>
</tr>
<tr>
<td><a href="http://www.experts-exchange.com"><img border="0" src="img4.jpg"></a></td>
<td><a href="http://www.experts-exchange.com"><img  border="0" src="img5.jpg"></a></td>
</tr>
</table>

It should have the same net effect. No matter which section on the overall table you click you go to the same URL.
0
Never miss a deadline with monday.com

The revolutionary project management tool is here!   Plan visually with a single glance and make sure your projects get done.

 
EricWestboCommented:
While Bit's suggestion does complete the task, it does create a bit more overhead... which I think peterned was looking to avoid.

Again, Cobol was on the right track with his comment... by building on that & using standard HTML specifications that both IE4 and NAV4 were compliant with, the SPAN & STYLE tags will complete the task as desired & will work in the browsers mentioned (specifically IE5 and NAV4.x)
0
 
COBOLdinosaurCommented:
Eric,

Show me ANY version of Netscrap 4.x where that works.

<span  style="cursor:hand"
onClick="window.location.href='http://www.experts-exchange.com'">


Considering that that Netscrap does not support cursor:hand and has no events on a span, I think you might want to re-asses your assertion that it will work for Nav 4.

There is nothing anywhere in form that will meet this requirement for Netscrap 4.  It cannot be done even with very ugly hacks.

Cd&
0
 
COBOLdinosaurCommented:
The only problem with Bit Twiddler's solution the that there will be gaps both vertically and horizontally between the links and click there will do nothing.  

Cd&
0
 
webwomanCommented:
How will there be gaps? If cellspacing and cellpadding are set to 0, there will NOT be any gaps.

It's the same exact way you set up any sliced up, mouseover image in Fireworks/ImageReady -- and those can ALL be links and have NO GAPS.

IMHO, setting each of the images as a link is the only way you're going to get it to work for everything. It's not hard, requires no scripting, and would be easy to change if you decide later to make each image a different link. Or have some not be a link at all.
0
 
COBOLdinosaurCommented:
ww,

Possible only if all of the images are exactly the same size.  The cells will size to the largest image.  A smaller image in any of the cells will result in gaps, and if that is the effect you are after why would you not just combine them into a single image.  It is all going to the same link, os if the images ar combined as a single image then it becomes a simple image link, that is compatible with everything.

Cd&
0
 
EricWestboCommented:
do tell... my bad.  havent' used NN4 for a while & was certain that SPAN could handle the event.

Please pass the salt... eating bland words kinda rots.


Ok, to review, peterned is looking for a way to create a table with each cell containing an identically sized image.  He would like compatibility with IE5.x and NN4.x and later.  He does not want to link each individual image or cell.

- scrap the older browser compatibility & COBOL's golden

OR

- scrap the HTML overhead & make each image a link... then Bit's got it.


I'm going to go cower in the corner for an hour or two.  :)
0
 
webwomanCommented:
Nah...we've all had days when we forgot that none of the browsers actually adhere to the 'standards' and that they seem to arbitrarily decide which ones they want to use.

And he DID state at the beginning that all the images were the same size. Sometimes I actually read the entire problem correctly. ;-)

0
 
peternedAuthor Commented:
OK, thanx to all.
I guess I'll use what Bit_Twiddler suggested, this was my first idea too and I asked this question looking for a solution about how to avoid that.
I accepted CB's answer because it's the closest to what I asked.
However no browser except IE5+ seem to understand
cursor:hand - NN6 & Opera does not change the cursor(at least for a table)
0

Featured Post

Free Tool: ZipGrep

ZipGrep is a utility that can list and search zip (.war, .ear, .jar, etc) archives for text patterns, without the need to extract the archive's contents.

One of a set of tools we're offering as a way to say thank you for being a part of the community.

  • 4
  • 3
  • 2
  • +2
Tackle projects and never again get stuck behind a technical roadblock.
Join Now