Solved

How to make entire table a link ?

Posted on 2002-04-24
11
184 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
Find Ransomware Secrets With All-Source Analysis

Ransomware has become a major concern for organizations; its prevalence has grown due to past successes achieved by threat actors. While each ransomware variant is different, we’ve seen some common tactics and trends used among the authors of the malware.

 
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

What Security Threats Are You Missing?

Enhance your security with threat intelligence from the web. Get trending threat insights on hackers, exploits, and suspicious IP addresses delivered to your inbox with our free Cyber Daily.

Join & Write a Comment

Popularity Can Be Measured Sometimes we deal with questions of popularity, and we need a way to collect opinions from our clients.  This article shows a simple teaching example of how we might elect a favorite color by letting our clients vote for …
SASS allows you to treat your CSS code in a more OOP way. Let's have a look on how you can structure your code in order for it to be easily maintained and reused.
In this Micro Tutorial viewers will learn how to create navigation buttons that change on rollover, using CSS (Continuation of the CSS Image Sprite tutorial) Create a parent ID for all the list items       - Specify position: absolute and display: block…
In this tutorial viewers will learn how to embed Flash content in a webpage using HTML5. Ensure your DOCTYPE declaration is set to HTML5: "<!DOCTYPE html>": Use the <object> tag to embed Flash content.: To specify that the object is Flash content, d…

760 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

16 Experts available now in Live!

Get 1:1 Help Now