Solved

How to make entire table a link ?

Posted on 2002-04-24
11
185 Views
Last Modified: 2010-04-09
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
Comment
Question by:peterned
  • 4
  • 3
  • 2
  • +2
11 Comments
 
LVL 53

Accepted Solution

by:
COBOLdinosaur earned 200 total points
ID: 6967216
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
 
LVL 4

Expert Comment

by:EricWestbo
ID: 6967382
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
 
LVL 4

Expert Comment

by:Bit_Twiddler
ID: 6967383
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
 
LVL 4

Expert Comment

by:EricWestbo
ID: 6967714
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
 
LVL 53

Expert Comment

by:COBOLdinosaur
ID: 6968293
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
Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

 
LVL 53

Expert Comment

by:COBOLdinosaur
ID: 6968304
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
 
LVL 19

Expert Comment

by:webwoman
ID: 6968429
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
 
LVL 53

Expert Comment

by:COBOLdinosaur
ID: 6968587
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
 
LVL 4

Expert Comment

by:EricWestbo
ID: 6968799
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
 
LVL 19

Expert Comment

by:webwoman
ID: 6968885
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
 

Author Comment

by:peterned
ID: 6973439
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

Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Suggested Solutions

Title # Comments Views Activity
Finding (and replacing) text between two strings in Php 7 52
HTML CSS 7 38
html5 auto send email 7 22
compact pure CSS Read More Toggle 4 24
Things That Drive Us Nuts Have you noticed the use of the reCaptcha feature at EE and other web sites?  It wants you to read and retype something that looks like this.Insanity!  It's not EE's fault - that's just the way reCaptcha works.  But it is …
Finding original email is quite difficult due to their duplicates. From this article, you will come to know why multiple duplicates of same emails appear and how to delete duplicate emails from Outlook securely and instantly while vital emails remai…
In this tutorial viewers will learn how to embed an audio file in a webpage using HTML5. Ensure your DOCTYPE declaration is set to HTML5: : The declaration should display (CODE) HTML5 is supported by the most recent versions of all major browsers…
The viewer will learn the benefit of using external CSS files and the relationship between class and ID selectors. Create your external css file by saving it as style.css then set up your style tags: (CODE) Reference the nav tag and set your prop…

895 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

12 Experts available now in Live!

Get 1:1 Help Now