empty table cell to be used as link

Discussion in 'Javascript' started by Greg N., Apr 4, 2005.

  1. Greg N.

    Greg N. Guest

    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
     
    Greg N., Apr 4, 2005
    #1
    1. Advertising

  2. Hi,

    You can try : <td background="landscape.jpg" height="200" onClick="location.href='URL_to_be_reached.ext'">&nbsp;</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
    >
    >
     
    Cédric Correa Luna, Apr 4, 2005
    #2
    1. Advertising

  3. 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/
     
    Martin Honnen, Apr 4, 2005
    #3
  4. Greg N.

    Greg N. Guest

    Cédric Correa Luna wrote:

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


    Well, this works, but the mouse pointer does not indicate that there is
    a link in that cell. Any solution for that?
     
    Greg N., Apr 4, 2005
    #4
  5. 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'">&nbsp;</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, Apr 4, 2005
    #5
  6. Greg N.

    RobB Guest

    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/Canning/canning-tomato-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>
     
    RobB, Apr 4, 2005
    #6
    1. Advertising

Want to reply to this thread or ask your own question?

It takes just 2 minutes to sign up (and it's free!). Just click the sign up button to choose a username and then you can ask your own questions on the forum.
Similar Threads
  1. Mike

    Empty table cell w/Struts

    Mike, Nov 30, 2004, in forum: Java
    Replies:
    3
    Views:
    657
    Sudsy
    Nov 30, 2004
  2. Phillip Roncoroni
    Replies:
    14
    Views:
    1,143
    Toby A Inkster
    Apr 5, 2004
  3. Glen K
    Replies:
    4
    Views:
    8,014
    PeterMcC
    Jul 14, 2004
  4. Clemenza

    Table cell as link

    Clemenza, Mar 19, 2005, in forum: HTML
    Replies:
    3
    Views:
    14,898
    Nico Schuyt
    Mar 19, 2005
  5. Symphony

    add hyber link to table or table cell web control

    Symphony, Mar 15, 2005, in forum: ASP .Net Web Controls
    Replies:
    1
    Views:
    436
    Ken Cox [Microsoft MVP]
    Mar 16, 2005
Loading...

Share This Page