empty table cell to be used as link

[Greg N.]

Hi folks,

I have a table cell with a background image, something like

<td background=landscape.jpg height=200></td>

The sole purpose of this code is to display the image inside that table
cell. It displays just as much of the image as the current cell width
allows. The actual cell width is determined by other cells in the same
table column and by the current browser window width.

That's exactly what I want. I am not using an <img> tag to display the
image because it would exceed the page width. I don't want a horizontal
scroll bar on the page.

Now the question: How can I turn that cell into a link?

I have placed an <a...></a> tag inside the cell, but whatever content I
put there would at least partly overlay the picture, which I don't want.

I have placed an <a> tag around the <td...> tag like this:
<a...><td...></td></a>
But this has no effect at all.

Can abybody help?

Greg

[Cédric Correa Luna]

Hi,

You can try : <td background="landscape.jpg" height="200" onClick="location.href='URL_to_be_reached.ext'">&n bsp;</td>

Cédric

Greg N. a écrit :

Hi folks,

I have a table cell with a background image, something like

<td background=landscape.jpg height=200></td>

The sole purpose of this code is to display the image inside that table
cell. It displays just as much of the image as the current cell width
allows. The actual cell width is determined by other cells in the same
table column and by the current browser window width.

That's exactly what I want. I am not using an <img> tag to display the
image because it would exceed the page width. I don't want a horizontal
scroll bar on the page.

Now the question: How can I turn that cell into a link?

I have placed an <a...></a> tag inside the cell, but whatever content I
put there would at least partly overlay the picture, which I don't want.

I have placed an <a> tag around the <td...> tag like this:
<a...><td...></td></a>
But this has no effect at all.

Can abybody help?

Greg

[Martin Honnen]

Greg N. wrote:

I have a table cell with a background image, something like

<td background=landscape.jpg height=200></td>

The sole purpose of this code is to display the image inside that table
cell. It displays just as much of the image as the current cell width
allows. The actual cell width is determined by other cells in the same
table column and by the current browser window width.

That's exactly what I want. I am not using an <img> tag to display the
image because it would exceed the page width. I don't want a horizontal
scroll bar on the page.

Now the question: How can I turn that cell into a link?

I have placed an <a...></a> tag inside the cell, but whatever content I
put there would at least partly overlay the picture, which I don't want.

If you need a link in your markup then use one to have the proper
structure and semantics in your document:
<a href="http://example.com">link</a>
If you want it to fill a table cell then you could use CSS to make it a
block element e.g.
<style type="text/css">
td.link a:link {
display: block;
width: 100%;
height: 100%;
}
</style>

...

<td class="link">
<a href="http://example.com">link</a>
</td>

You could choose to have an empty link
<td class="link">
<a href="http://example.com">&nbsp;</a>
</td>
and rely on the background image being rendered but you shouldn't really
do that, what about users with browsers that don't render images (either
as they are pure text browsers or as users have configured the browser
not to render images). You should first aim to have properly structured
semantic markup and then look at CSS to suggest the presentation of that
markup. You seem to currently aim at a particular presentation which
could result in a non-functional page with no link or a not visible link
for browser users.

--

Martin Honnen
http://JavaScript.FAQTs.com/

[Greg N.]

Cédric Correa Luna wrote:

You can try : <td background="landscape.jpg" height="200"
onClick="location.href='URL_to_be_reached.ext'">&n bsp;</td>

Well, this works, but the mouse pointer does not indicate that there is
a link in that cell. Any solution for that?

[Cédric Correa Luna]

Hi,

You can find the answer in any CSS doc, but you may want to try that :
<td background="landscape.jpg" height="200" onClick="location.href='URL_to_be_reached.ext'" style="cursor:pointer">&nbsp;</td>

Cédric

Greg N. a écrit :

Cédric Correa Luna wrote:

You can try : <td background="landscape.jpg" height="200"
onClick="location.href='URL_to_be_reached.ext'">&n bsp;</td>

Well, this works, but the mouse pointer does not indicate that there is
a link in that cell. Any solution for that?

[RobB]

Martin Honnen wrote:

Greg N. wrote:

I have a table cell with a background image, something like

<td background=landscape.jpg height=200></td>

The sole purpose of this code is to display the image inside that table cell. It displays just as much of the image as the current cell width allows. The actual cell width is determined by other cells in the same table column and by the current browser window width.

That's exactly what I want. I am not using an <img> tag to display the image because it would exceed the page width. I don't want a horizontal scroll bar on the page.

Now the question: How can I turn that cell into a link?

I have placed an <a...></a> tag inside the cell, but whatever content I put there would at least partly overlay the picture, which I don't

want.
If you need a link in your markup then use one to have the proper
structure and semantics in your document:
<a href="http://example.com">link</a>
If you want it to fill a table cell then you could use CSS to make it a block element e.g.
<style type="text/css">
td.link a:link {
display: block;
width: 100%;
height: 100%;
}
</style>

...

<td class="link">
<a href="http://example.com">link</a>
</td>

You could choose to have an empty link
<td class="link">
<a href="http://example.com">&nbsp;</a>
</td>
and rely on the background image being rendered but you shouldn't really do that, what about users with browsers that don't render images (either as they are pure text browsers or as users have configured the browser not to render images). You should first aim to have properly structured semantic markup and then look at CSS to suggest the presentation of that markup. You seem to currently aim at a particular presentation which
could result in a non-functional page with no link or a not visible link for browser users.

--

Martin Honnen
http://JavaScript.FAQTs.com/

Curious: why did you ignore M. Honnen's (typically) excellent answer?

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<style type="text/css">

table {
border-collapse: collapse;
}
td {
width: 160px;
height: 160px;
border: 3px #fff inset;
background: #000;
}
#foo {
background: center center
url(http://www.paulnoll.com/Oregon/Canni...to-juice.jpg);
}
#foo a:link, #foo a:visited {
display: block;
width: 100%;
height: 100%;
border: 1px #000 solid;
}
#foo a:hover {
border: 1px #ff0 solid;
}

</style>
<script type="text/javascript">

function x()
{
alert('click !');
}

</script>
</head>
<body>
<table>
<tbody>
<tr>
<td></td>
<td></td>
<td id="foo"><a href="javascript:void x()"></a></td>
<td></td>
</tr>
</tbody>
</table>
</body>
</html>