Solved

How to make entire table a link ?

Posted on 2002-04-24
11
190 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
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 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
Independent Software Vendors: We Want Your Opinion

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 
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
 
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

Technology Partners: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

Question has a verified solution.

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

Have you tried to learn about Unicode, UTF-8, and multibyte text encoding and all the articles are just too "academic" or too technical? This article aims to make the whole topic easy for just about anyone to understand.
Use these top 10 tips to master the art of email signature design. Create an email signature design that will easily wow recipients, promote your brand and highlight your professionalism.
In this tutorial viewers will learn how to style elements, such a divs, with a "drop shadow" effect using the CSS box-shadow property Start with a normal styled element, such as a div.: In the element's style, type the box shadow property: "box-shad…
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

726 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