473,231 Members | 1,897 Online
Bytes | Software Development & Data Engineering Community
Post Job

Home Posts Topics Members FAQ

Join Bytes to post your question to a community of 473,231 software developers and data experts.

empty table cell to be used as link

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
Jul 23 '05 #1
5 3852
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

Jul 23 '05 #2


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/
Jul 23 '05 #3
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?
Jul 23 '05 #4
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?

Jul 23 '05 #5
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>

Jul 23 '05 #6

This thread has been closed and replies have been disabled. Please start a new discussion.

Similar topics

11
by: VK | last post by:
Hi, I'm playing around with tables (TOM vs. DOM etc.) I cannot figure out an effective highlight mechanics for the cells: 1) No problems with: <td ...onMouseOver/Out background change> some...
31
by: Royal Denning | last post by:
I am designing a table with 2 columns and 20 rows. I want to insert small images (each with a link) and a text title in each cell of the table. On refresh of the page, I would like to have the...
5
by: john_williams_800 | last post by:
Hi; I am just starting to use the DOM to do some more advanced javascripting so please be patient with my question if it is an ignorant question. I would like to use the DOM to dynamically...
1
by: Thanks | last post by:
I have a routine that is called on Page_Init. It retrieves folder records from a database which I display as Link Buttons in a table cell. I set the table cell's bgcolor to a default color (say...
14
by: Xah Lee | last post by:
if i want to have a empty link, which way is more proper? <a href=""> <a href="#"> <a href="javascript:void(0);"> Xah xah@xahlee.org ∑ http://xahlee.org/
8
by: chrisoftoday | last post by:
Hi, I'm having trouble with some white space that's appearing in my table. I can't seem to spot the problem, it'd be great if someone could help. The HTML code (ignore the PHP, it shouldn't be...
2
by: OceanBreeze | last post by:
Border drawn in C# Table programmatically even if several adjacent horizontal & vertical cells are empty in the table I want to programmatically have border on each and every row and column in the...
7
by: Kamal | last post by:
Hello all, I have a very simple html table with collapsible rows and sorting capabilities. The collapsible row is hidden with css rule (display:none). When one clicks in the left of the...
3
by: August Karlstrom | last post by:
Hi everyone, In XHTML, can any empty element <foo></foobe replaced by <foo />? Example: <table> <tr><td>1</td><td>2</td></tr> <tr><td /><td>4</td></tr> </table>
0
by: jianzs | last post by:
Introduction Cloud-native applications are conventionally identified as those designed and nurtured on cloud infrastructure. Such applications, rooted in cloud technologies, skillfully benefit from...
0
by: abbasky | last post by:
### Vandf component communication method one: data sharing ​ Vandf components can achieve data exchange through data sharing, state sharing, events, and other methods. Vandf's data exchange method...
0
by: fareedcanada | last post by:
Hello I am trying to split number on their count. suppose i have 121314151617 (12cnt) then number should be split like 12,13,14,15,16,17 and if 11314151617 (11cnt) then should be split like...
0
by: stefan129 | last post by:
Hey forum members, I'm exploring options for SSL certificates for multiple domains. Has anyone had experience with multi-domain SSL certificates? Any recommendations on reliable providers or specific...
1
by: davi5007 | last post by:
Hi, Basically, I am trying to automate a field named TraceabilityNo into a web page from an access form. I've got the serial held in the variable strSearchString. How can I get this into the...
0
by: DolphinDB | last post by:
The formulas of 101 quantitative trading alphas used by WorldQuant were presented in the paper 101 Formulaic Alphas. However, some formulas are complex, leading to challenges in calculation. Take...
0
by: DolphinDB | last post by:
Tired of spending countless mintues downsampling your data? Look no further! In this article, you’ll learn how to efficiently downsample 6.48 billion high-frequency records to 61 million...
0
by: Aftab Ahmad | last post by:
Hello Experts! I have written a code in MS Access for a cmd called "WhatsApp Message" to open WhatsApp using that very code but the problem is that it gives a popup message everytime I clicked on...
0
by: Aftab Ahmad | last post by:
So, I have written a code for a cmd called "Send WhatsApp Message" to open and send WhatsApp messaage. The code is given below. Dim IE As Object Set IE =...

By using Bytes.com and it's services, you agree to our Privacy Policy and Terms of Use.

To disable or enable advertisements and analytics tracking please visit the manage ads & tracking page.