Simple Help with TD and Links?

Discussion in 'HTML & Website Design' started by nickharper, Sep 18, 2008.

  1. #1
    I am trying to make a TD clickable so that you can use the TD as a link on my phpbay template.

    This is the code:

     <td width="300" align="center" style="word-wrap: break-word;border: 1px solid #FDFDF3;font-size:12px;" bgcolor="#FDFDF3" onmouseover="style.backgroundColor='%%hover%%';"onmouseout="style.backgroundColor='#FDFDF3'" ></a><a href="%%link_url%%" target="_blank" rel="nofollow" border="0"><img src="%%image%%" alt="%%alt_title%%" border="0" /></a><br />
          <a href="%%link_url%%" target="_blank" rel="nofollow"><strong><!--startoftitle-->%%title%%<!--endoftitle--></strong></a><br />
          %%currency%%%%price_or_bin%%
        </td>
    Code (markup):
    How can I make the TD click able to point to the link in a new window?
     
    nickharper, Sep 18, 2008 IP
  2. Joseph S

    Joseph S Well-Known Member

    Messages:
    1,373
    Likes Received:
    17
    Best Answers:
    0
    Trophy Points:
    155
    #2
    Try these:

    <table><tr><td onclick="window.open('http://www.webdomainsbroker.com/');">
    Click me
    </td></tr></table>
    Code (markup):

    <div onclick="window.open('http://www.webdomainsbroker.com/');">
    click me
    </div>
    Code (markup):
     
    Joseph S, Sep 18, 2008 IP
  3. nickharper

    nickharper Active Member

    Messages:
    732
    Likes Received:
    16
    Best Answers:
    0
    Trophy Points:
    75
    #3
    I have tried:

     <td width="300" align="center" style="word-wrap: break-word;border: 1px solid #FDFDF3;font-size:12px;" bgcolor="#FDFDF3" onmouseover="style.backgroundColor='%%hover%%';"onmouseout="style.backgroundColor='#FDFDF3'"onclick="window.open('%%link_url%%') ></a><a href="%%link_url%%" target="_blank" rel="nofollow" border="0"><img src="%%image%%" alt="%%alt_title%%" border="0" /></a><br />
          <a href="%%link_url%%" target="_blank" rel="nofollow"><strong><!--startoftitle-->%%title%%<!--endoftitle--></strong></a><br />
          %%currency%%%%price_or_bin%%
        </td>
    Code (markup):
    Which produces:

    <td width="300" align="center" style="word-wrap: break-word;border: 1px solid #FDFDF3;font-size:12px;" bgcolor="#FDFDF3" onmouseover="style.backgroundColor='#fce9e4';"onmouseout="style.backgroundColor='#FDFDF3'"onclick="window.open('http://www.retroconsolestore.com/item-nes-fc-super-top-loader-gun-new-duck-hunt-zapper_360089171152_GB.html') ></a><a href="http://www.retroconsolestore.com/item-nes-fc-super-top-loader-gun-new-duck-hunt-zapper_360089171152_GB.html" target="_blank" rel="nofollow" border="0"><img src="http://www.retroconsolestore.com/images/e/360089171152_0.jpg" alt="NES FC Super Top Loader Gun NEW Duck Hunt Zapper" border="0" /></a><br />
    
          <a href="http://www.retroconsolestore.com/item-nes-fc-super-top-loader-gun-new-duck-hunt-zapper_360089171152_GB.html" target="_blank" rel="nofollow"><strong>Nes Fc Super Top Loader Gun New Duck Hunt Zapper</strong></a><br />
          &#163;3.88
        </td>
    Code (markup):
    Still with no luck :(
     
    nickharper, Sep 18, 2008 IP
  4. ClickMedia

    ClickMedia Banned

    Messages:
    104
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #4
    Just remove the remove the anchor close tag right after the TD open .

    <td width="300" align="center"
    style="word-wrap: break-word;border: 1px solid #FDFDF3;font-size:12px;"
    bgcolor="#FDFDF3"
    onmouseover="style.backgroundColor='%%hover%%';"
    onmouseout="style.backgroundColor='#FDFDF3'" >


    <a href="%%link_url%%" target="_blank" rel="nofollow" border="0">
    <img src="%%image%%" alt="%%alt_title%%" border="0" />
    </a><br />

    <a href="%%link_url%%" target="_blank" rel="nofollow">
    <strong><!--startoftitle-->%%title%%<!--endoftitle--></strong>
    </a>
    <br />
    %%currency%%%%price_or_bin%%
    </td>
     
    ClickMedia, Sep 18, 2008 IP
  5. Joseph S

    Joseph S Well-Known Member

    Messages:
    1,373
    Likes Received:
    17
    Best Answers:
    0
    Trophy Points:
    155
    #5
    It should be like this:

    <table><tr><td width="300" align="center" 
    style="word-wrap: break-word;border: 1px solid #FDFDF3;font-size:12px;" 
    onmouseover="style.backgroundColor='#fce9e4';" 
    onmouseout="style.backgroundColor='#FDFDF3'" 
    onclick="window.open('http://www.retroconsolestore.com/item-nes-fc-super-top-loader-gun-new-duck-hunt-zapper_360089171152_GB.html')">
    
    <a href="http://www.retroconsolestore.com/item-nes-fc-super-top-loader-gun-new-duck-hunt-zapper_360089171152_GB.html" target="_blank" rel="nofollow" border="0"><img src="http://www.retroconsolestore.com/images/e/360089171152_0.jpg" alt="NES FC Super Top Loader Gun NEW Duck Hunt Zapper" border="0" /></a><br />
    
          <a href="http://www.retroconsolestore.com/item-nes-fc-super-top-loader-gun-new-duck-hunt-zapper_360089171152_GB.html" target="_blank" rel="nofollow"><strong>Nes Fc Super Top Loader Gun New Duck Hunt Zapper</strong></a><br />
          £3.88
        </td></tr></table>
    Code (markup):

    I cut at random from your code:
    onmouseout="style.backgroundColor='#FDFDF3'"onclick="window.open('%%link_url%%')
    Code (markup):
    You added everything in a single line, with no space.
    onmouseout="style.backgroundColor='#FDFDF3'" is one, add a space after
    onclick="window.open('%%link_url%%')" is another, etc.

    I hope that helps.
     
    Joseph S, Sep 18, 2008 IP
  6. Stomme poes

    Stomme poes Peon

    Messages:
    3,195
    Likes Received:
    136
    Best Answers:
    0
    Trophy Points:
    0
    #6
    Seriously, wth? Why are you using Javajunk to change a background colour? Why are you seriously fux0ring keyboarders and those without JS like that? Are you TRYING to drive your customers away???

    There's NO reason not to just have a normal link.

    ClickMedia found the </a> sitting before the real anchor and that may have been one reason the link in the td didn't work (not sure, browsers let a lot of garbage get through before they quit working).

    Seriously,
    <td>
    <a href="linky.com" target="_blank" title="Opens a New Window!">
    <img src="image.gif" height="100%" width="100%" alt="clicky linky here" /></a>
    td texty stuffs
    </td>

    Make the a display: block; and if you need to adjust the height then do so. The a being a block will naturally fill the clickable area to the width of the td. The image could be set to 100% height and width if that makes sense in this case, otherwise just the actual dimensions.
    The td texty stuff should also be a new line simply because the a above it has been made a block... well, I'm 99% sure : )

    The hover styles should be in CSS. If you have other people pasting this, give a really special unique name to the td as an ID. You can make them paste the CSS either in their <head> or CSS sheet, and having an ID should mean your styles only affect your td.

    <td id="fuckingawesomelinktabledatacell"> or what ever.

    CSS
    
    #fuckingawesomelinktabledatacell {
      width: 300px;
      word-wrap: break-word; (you know this only works in IE, right?)
      border: 1px solid #FDFDF3;
      font-size: 12px; 
      background-color: #FDFDF3;
      vertical-align: middle;
      text-align: center; (not sure which of these you wanted)
    }
             #fuckingawesomelinktabledatacell:focus, #fuckingawesomelinktabledatacell:hover {   
      background-color: #whatever;
              }   
    #fuckingawesomelinktabledatacell a {
      display: block;
      height: 100%; (not sure if this works in a table, usually the parent needs a set width for this to work but we'll see)
    }
          #fuckingawesomelinktabledatacell a img {
            border: 0;
          }
    
    Code (markup):
    ok, the id is ridiculously long but just pick something that is really specific to your site so others are unlikely to have such an id elsewhere on their page.
     
    Stomme poes, Sep 19, 2008 IP