peterned
asked on
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 = "https://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
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 = "https://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
ASKER CERTIFIED SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
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"https://www.experts-exchange.com"><img border="0" src="img0.jpg"></a></td>
<td><a href="https://www.experts-exchange.com"><img border="0"src="img1.jpg"><
</tr>
<tr>
<td><a href="https://www.experts-exchange.com"><img border="0" src="img2.jpg"></a></td>
<td><<a href="https://www.experts-exchange.com"><img border="0" src="img3.jpg"></a></td>
</tr>
<tr>
<td><a href="https://www.experts-exchange.com"><img border="0" src="img4.jpg"></a></td>
<td><a href="https://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.
tr>
<td><a href"https://www.experts-exchange.com"><img border="0" src="img0.jpg"></a></td>
<td><a href="https://www.experts-exchange.com"><img border="0"src="img1.jpg"><
</tr>
<tr>
<td><a href="https://www.experts-exchange.com"><img border="0" src="img2.jpg"></a></td>
<td><<a href="https://www.experts-exchange.com"><img border="0" src="img3.jpg"></a></td>
</tr>
<tr>
<td><a href="https://www.experts-exchange.com"><img border="0" src="img4.jpg"></a></td>
<td><a href="https://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.
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)
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)
Eric,
Show me ANY version of Netscrap 4.x where that works.
<span style="cursor:hand"
onClick="window.location.h
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&
Show me ANY version of Netscrap 4.x where that works.
<span style="cursor:hand"
onClick="window.location.h
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&
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&
Cd&
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.
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.
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&
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&
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. :)
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. :)
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. ;-)
And he DID state at the beginning that all the images were the same size. Sometimes I actually read the entire problem correctly. ;-)
ASKER
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)
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)
<span style="cursor:hand"
onClick="window.location.h
<table border="0" cellspacing="0" cellpadding="0">
<tr>
<td><img src="https://www.experts-exchange.com/images/email.gif"></td>
<td><img src="https://www.experts-exchange.com/images/email.gif"></td>
</tr>
<tr>
<td><img src="https://www.experts-exchange.com/images/email.gif"></td>
<td><img src="https://www.experts-exchange.com/images/email.gif"></td>
</tr>
<tr>
<td><img src="https://www.experts-exchange.com/images/email.gif"></td>
<td><img src="https://www.experts-exchange.com/images/email.gif"></td>
</tr>
</table>
</span>
And that should do it!