30 Replies Latest reply: Nov 25, 2009 12:36 PM by E. Michael Brandt RSS

    How to link a table cell?

    LArden Community Member

      Hi,

      What would be the best way to link this table cell? I want the entire cell to be linked rather than just the text inside it.

       

      <table width="160" border="0" align="right" cellpadding="5" cellspacing="0" class="backgroundbox-video">
                            <tr>
      <td width="167" align="left" valign="top"><p class="navheader-lg">Video Clip</p>
                                  <p class="navheader-sm">Watch a short<br />
                                    testimonial video</p></td>
                            </tr>

       

      Thanks so much

      Laura

        • 1. Re: How to link a table cell?
          LArden Community Member

          Also, I've tried in DW to do the following:

          Selected the table cell, chose "open in browser window" from the Behaviors panel

          Put in the info

          Tested...but nothing happens when i click on the table cell.

           

          Script which was added to header of page is

          <script type="text/javascript">
          <!--
          function MM_openBrWindow(theURL,winName,features) { //v2.0
            window.open(theURL,winName,features);
          }
          //-->
          </script>

           

           

          code on table cell is

          <table width="160" border="0" align="right" cellpadding="5" cellspacing="0" class="backgroundbox-video" onfocus="MM_openBrWindow('http://www.yellowpages.com/info-21979997/Lambert-Andrea-LMFT/?auto_play=true','VideoPlayer ','toolbar=yes,location=yes,status=yes,menubar=yes,scrollbars=yes,resizable=yes,width=500, height=500')">
                                <tr>
          <td width="167" align="left" valign="top"><p class="navheader-lg">Video Clip</p>
                                      <p class="navheader-sm">Watch a short<br />
                                        testimonial video</p></td>
                                </tr>

           

           

          What am I missing?

           

          Thanks!

          • 2. Re: How to link a table cell?
            E. Michael Brandt Community Member

            This will not work.  Often you can accomplish something close by using display:block on the <a> tag inside the td, which expands the effect to make it look like it is the entire td that is linked.  Here is a tutorial on this:

             

            http://www.dreamweaverresources.com/tutorials/clickable_cell.htm

             

            BTW, your current code, which you should remove, is on the table tag rather than the td, and is using the onfocus event rather than the onclick.  But no matter, simply remove it.

             

            --

             
            E. Michael Brandt

            www.divahtml.com
            www.divahtml.com/products/scripts_dreamweaver_extensions.php
            Standards-compliant scripts and Dreamweaver Extensions

            www.valleywebdesigns.com/vwd_Vdw.asp
            JustSo PictureWindow
            JustSo PhotoAlbum, et alia

            --
            • 3. Re: How to link a table cell?
              LArden Community Member

              Hi

              Thanks for your help. I don't see in that tutorial how to link to another page, only how to hover colors?

               

              Also, I want to open the link in a "borderless window" which I'm trying with the behavior "open browser window" (which is writing that code I posted) but it's not working.

              • 4. Re: How to link a table cell?
                Nancy O. CommunityMVP

                You can't link an empty table cell to anything.  But you can add hyperlinked text to your cells and set CSS properties to display:block and  width: 100%.  See screenshot.

                DisplayBlockTD.gif

                 

                Here's the code.

                 

                <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
                <html xmlns="http://www.w3.org/1999/xhtml">
                <head>
                <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
                <title>Untitled Document</title>
                
                <style type="text/css">
                
                table {
                width: 500px;
                margin:0 auto;
                text-align: center;
                }
                
                /**TABLE LINKS**/
                
                td a {
                display:block;
                width: 100%;
                background: #666;
                padding: 10px 0 10px 0;
                text-decoration: none;
                }
                td a:link {color:#FF0000}      
                td a:visited {color:#FFFFFF} 
                td a:hover {color:#FFFFFF; background:#FF0000}  
                td a:active {color:#FFFF00} 
                </style>
                
                </head>
                
                <body>
                <table cellpadding="0" cellspacing="0">
                <tr>
                <td><a href="#">Link Text Here</a></td>
                <td><a href="#">More Link Text</a></td>
                </tr>
                <tr>
                <td><a href="#">Link Text Here</a></td>
                <td><a href="#">More Link Text</a></td>
                </tr>
                </table>
                </body>
                </html>
                
                
                

                 

                Nancy O.
                Alt-Web Design & Publishing
                Web | Graphics | Print | Media  Specialists
                www.alt-web.com/
                www.twitter.com/altweb
                www.alt-web.blogspot.com

                • 5. Re: How to link a table cell?
                  LArden Community Member

                  It's not an empty cell, it has text and a background image, as well as a style already applied to the table.


                  Can you advise given the code I've posted?

                   

                  Thanks so much.

                  • 6. Re: How to link a table cell?
                    LArden Community Member

                    I just realized that for some reason the code I posted did not show up...

                     

                    What I posted was:

                     

                    Ive got this table

                     

                    <table width="160" border="0" align="right" cellpadding="5" cellspacing="0" class="backgroundbox-video">
                                          <tr>
                    <td width="167" align="left" valign="top"><p class="navheader-lg">Video Clip</p>
                                                <p class="navheader-sm">Watch a short<br />
                                                  testimonial video</p></td>
                                          </tr>

                     

                    Which is using the css style

                     

                    .backgroundbox-video {
                        background:no-repeat;
                        background-repeat:no-repeat;
                        background-position: bottom right;
                        background-image:url(../images/videoclip-imageandcolor.gif);
                        background-color:#B1D6D5;
                    }

                     

                    and I'd like it to do two things.

                    (1) For the entire table cell to be clickable to go to the link

                    http://www.12results.com/video1.html

                    and

                    (2) for that link to then open in a borderless window

                     

                    But when I try to apply the behaviour "open browser window" from the behaviour panel in DW, then test it, nothing happens.

                     

                    Then that code looks like this once I apply it...

                     

                    <table width="160" border="0" align="right" cellpadding="5" cellspacing="0" class="backgroundbox-video" onfocus="MM_openBrWindow('http://www.12results.com/video1.html','','width=400,height=400')">
                                          <tr>
                    <td width="167" align="left" valign="top"><p class="navheader-lg">Video Clip</p>
                                                <p class="navheader-sm">Watch a short<br />
                                                  testimonial video</p></td>
                                          </tr>

                     

                    So my issues are two fold:

                     

                    1. how to make that cell clickable and

                    2. how to make the link open in a borderless window (right term?)

                     

                    Thanks again....sorry dont know why the code didnt post.

                    • 7. Re: How to link a table cell?
                      Nancy O. CommunityMVP

                      It's not an empty cell, it has text and a background image, as well as a style already applied to the table.

                       

                      That is not evident from the code snippets you posted. 

                       

                      Can you advise given the code I've posted?

                       

                      No.  We would need to see the live page with complete HTML and CSS code.

                       

                      Or,  just copy & paste the code I gave you into a new, blank HTML document and play with it.  You might be surprised at what you can learn from code.

                       

                       

                      Best of luck with your project,

                       

                      Nancy O.
                      Alt-Web Design & Publishing
                      Web | Graphics | Print | Media  Specialists
                      www.alt-web.com/
                      www.twitter.com/altweb
                      www.alt-web.blogspot.com

                      • 8. Re: How to link a table cell?
                        LArden Community Member

                        So sorry about the code not being posted...I think I must have closed the browser window before it posted.

                         

                        Here is the page

                        http://www.12results.com/index3.html

                         

                        Thanks again for your help...I'll play with the code you posted as well.

                        • 9. Re: How to link a table cell?
                          E. Michael Brandt Community Member

                          Here's the td:

                           

                          <td class="vidA" width="167" align="left" valign="top"><a href="http://www.12results.com/video1.html" onclick="MM_openBrWindow('http://www.12results.com/video1.html','','width=400,height=400');return false">
                                <span class="navheader-lg">Video Clip</span><br />
                                <span class="navheader-sm">Watch a short testimonial video</span></a>
                          </td>

                           

                          paste it in your table to replace the current td.

                           

                          And here's the css to paste this into your css:

                           

                          .vidA a {
                              text-decoration: none;
                              display:block;
                              background-color:#B1D6D5;
                              padding:14px;
                              background-image: url(../images/videoclip-imageandcolor.gif) no-repeat scroll right bottom;
                          }
                          .vidA a:link, .vidA a:visited, .vidA a:hover{
                              color:black;
                          }
                          .vidA a:hover{
                              background-color:#C4F894;
                             
                          }
                          .vidA p {
                              margin:14px;
                          }

                           

                          There are two other things (at least) to do:

                           

                          1) must remove the background styling from the  backgroundbox-video class

                           

                          2) edit the image /images/videoclip-imageandcolor.gif to be a transparent gif with current blue bg color changed to transparent.

                           

                          Hope that helps.

                           

                          -- 

                          E. Michael Brandt

                          www.divahtml.com
                          www.divahtml.com/products/scripts_dreamweaver_extensions.php
                          Standards-compliant scripts and Dreamweaver Extensions

                          www.valleywebdesigns.com/vwd_Vdw.asp
                          JustSo PictureWindow
                          JustSo PhotoAlbum, et alia

                          --
                          • 10. Re: How to link a table cell?
                            LArden Community Member

                            Thank you...will try it and post results.

                             

                            One thing...I tried that with a transparent gif and it was pixelated around the edges, so I set it on a layer the same color as the background color...not sure how this will work to make transparent again, it looked terrible transparent.

                             

                            I'll give it a shot and post the link....

                             

                            Thanks again.

                            • 11. Re: How to link a table cell?
                              E. Michael Brandt Community Member

                              It is perfect that you've put the graphic on the exact bg color you'll be resting the

                              image upon once it is transparent.  That's exactly the right way to make a transparent image that will hide the jaggies!  In Fireworks, use the dropper in the transparent tool to select that blue bg and make it transparent. Using "index color" setting should work

                               

                              -- 


                              E. Michael Brandt

                              www.divahtml.com
                              www.divahtml.com/products/scripts_dreamweaver_extensions.php
                              Standards-compliant scripts and Dreamweaver Extensions

                              www.valleywebdesigns.com/vwd_Vdw.asp
                              JustSo PictureWindow
                              JustSo PhotoAlbum, et alia

                              --
                              • 12. Re: How to link a table cell?
                                E. Michael Brandt Community Member

                                I've put up my test page for you to see it in action (without the background image)

                                 

                                http://divahtml.com/test/lvanhoff.html

                                 

                                -- 


                                E. Michael Brandt

                                www.divahtml.com
                                www.divahtml.com/products/scripts_dreamweaver_extensions.php
                                Standards-compliant scripts and Dreamweaver Extensions

                                www.valleywebdesigns.com/vwd_Vdw.asp
                                JustSo PictureWindow
                                JustSo PhotoAlbum, et alia

                                --
                                • 13. Re: How to link a table cell?
                                  LArden Community Member

                                  oh that is exactly what i was trying to...yes, thank you!!

                                   

                                  Ok will implement now...and report back...


                                  Thank you so much!

                                   

                                  Laura

                                  • 14. Re: How to link a table cell?
                                    LArden Community Member

                                    It worked great, thank you!

                                    http://www.12results.com/

                                     

                                    I was sure that there was a way to make the entire cell be linkable though, rather than just the text? Or is it not worth worrying about? Also, how in this method, would I swap the background image so that, for example, the image would be a lighter blue?

                                     

                                    Also, I did save as transparent/index transparent. Not sure if I did that right. Does it look like you would think it should?

                                     

                                    My next task is to make that right side Tell a Friend work...I should probably post a new thread abou that. If you have a suggestion for the best method for that I'd appreciate it! I'll post now as new new thread.

                                     

                                    Do you think the video link could be improved in any way?

                                     

                                    Thank you again, I really appreciate it!

                                     

                                    Laura

                                    • 15. Re: How to link a table cell?
                                      LArden Community Member

                                      I just looked again at what you did...and i see you have the hover color, but how do i make both the hover color and background image happen? :-)

                                       

                                      Thanks

                                      • 16. Re: How to link a table cell?
                                        LArden Community Member

                                        My mistake, hadn't uploaded new style sheet...scratch the last questions! Sorry for the confusion.

                                         

                                        Now...for both audio and video boxes I'm just stuck on how how to make background image appear...it's otherwise just right!

                                         

                                        So I must have goofed up the fireworks/transparent image issue...??

                                        • 17. Re: How to link a table cell?
                                          LArden Community Member

                                          Here is what I have in the style sheet...

                                           

                                          }
                                          .vidA a {
                                              text-decoration: none;
                                              display:block;
                                              background-image: url(../images/videoclip-imageandcolor-tr.gif) no-repeat scroll right bottom;
                                              background-color:#B1D6D5;
                                              padding:10px;
                                          }
                                          .vidA a:link, .vidA a:visited, .vidA a:hover{
                                              color:black;
                                          }
                                          .vidA a:hover{
                                              background-color:#4AA3C9;
                                          }
                                          .vidA p {
                                              margin:5px;
                                          }
                                          .audioA a {
                                              text-decoration: none;
                                              display:block;
                                              background-image: url(../images/audioclip-imageandcolor-tr.gif) no-repeat scroll right bottom;
                                              background-color:#B1D6D5;
                                              padding:10px;

                                           

                                          }
                                          .audioA a:link, .vidA a:visited, .vidA a:hover{
                                              color:black;
                                          }
                                          .audioA a:hover{
                                              background-color:#4AA3C9;
                                          }
                                          .audioA p {
                                              margin:5px;
                                          }

                                           

                                           

                                          and here is what I have for those tables...

                                           

                                          <td align="right" valign="top" bgcolor="#FFFFFF"><table width="160" border="0" align="right" cellpadding="5" cellspacing="0" class="backgroundbox-video">
                                                                <tr>
                                                                  <td class="vidA" width="167" height="100" align="left" valign="middle"><a href="http://www.12results.com/video1.html" onclick="MM_openBrWindow('http://www.12results.com/video1.html','','width=400,height=400');return false">
                                                <span class="navheader-lg">Video Clip</span><br />
                                                <span class="navheader-sm"><br />
                                                Watch a short<br />
                                                testimonial video</span></a></td>
                                                                </tr>
                                                              </table></td>
                                                            </tr>
                                                            <tr>
                                                              <td align="right" valign="top" bgcolor="#FFFFFF"><table width="160" border="0" align="right" cellpadding="5" cellspacing="0" class="backgroundbox-audio">
                                                                <tr>
                                                                  <td class="audioA" width="167" height="100" align="left" valign="middle"><a href="http://www.12results.com/video1.html" onclick="MM_openBrWindow('http://www.12results.com/video1.html','','width=400,height=400');return false"> <span class="navheader-lg">Audio Clip</span><br />
                                                                        <span class="navheader-sm"><br />
                                                                        Listen to a 40 min<br />
                                          interview about SAW</span></a></td>
                                                                </tr>
                                                              </table></td>

                                           

                                           

                                          ---I completely removed the styles for those tables (was background-video, background-audio) because all it had was the background styling (which you said to remove) and can't see any other reason to have it there?

                                           

                                          So it's perfect except for the background images are not showing...so did I do something wrong in the fireworks/make transparent process do you think?

                                           

                                          Thanks...

                                          Laura

                                          • 18. Re: How to link a table cell?
                                            E. Michael Brandt Community Member

                                            Your online page does not have the new html, so can not tell what might be going on just yet.

                                             

                                            But I also realize now that if yiou do wish to have the bg color chage on hover as I have it now, you will have to use the a:hover selector to style its  background image to a new version of the same image but with its transparency created with the hover bg color as index for the transparency.  Else you'll get the jaggies on mouseover.

                                             

                                            If you upload the new page, and the current bg image that you say you are having trouble with, we can take a look.  I might be a while getting back to you as it is getting a bit late in the day.

                                             

                                            -- 

                                            E. Michael Brandt

                                            www.divahtml.com
                                            www.divahtml.com/products/scripts_dreamweaver_extensions.php
                                            Standards-compliant scripts and Dreamweaver Extensions

                                            www.valleywebdesigns.com/vwd_Vdw.asp
                                            JustSo PictureWindow
                                            JustSo PhotoAlbum, et alia

                                            --
                                            • 19. Re: How to link a table cell?
                                              LArden Community Member

                                              Hmmm...I think i did upload it all? Because was testing it.

                                               

                                              Well i like the idea of the hover color but i think it would be better as an image swap and i can change that blue to a green or whatever...

                                               

                                              so it's perfect except...

                                              -you lost me on that last explanation

                                              -i do want the background image to show

                                              -but i think an image swap version of "hover color" might be better (which i realize i dindt say before :-)

                                               

                                              so i could change the image as it is now (to show as it is now) but swap image to a slightly different color version on hover?

                                              • 20. Re: How to link a table cell?
                                                LArden Community Member

                                                you will have to use the a:hover selector to style its  background image to a new version of the same image but with its transparency created with the *hover* bg color as index for the transparency.

                                                 

                                                this is the part i dont understand...?

                                                • 21. Re: How to link a table cell?
                                                  E. Michael Brandt Community Member

                                                  Remove these from you css:

                                                   

                                                  .vidA p {
                                                      margin:5px;
                                                  }

                                                   

                                                  and

                                                   

                                                  .audioA p {
                                                      margin:5px;
                                                  }

                                                   

                                                  (there are no <p> tags in this td any more.)

                                                   

                                                  But after that, I cannot tell what the problem is without seeing your page online.

                                                   

                                                  -- 


                                                  E. Michael Brandt

                                                  www.divahtml.com
                                                  www.divahtml.com/products/scripts_dreamweaver_extensions.php
                                                  Standards-compliant scripts and Dreamweaver Extensions

                                                  www.valleywebdesigns.com/vwd_Vdw.asp
                                                  JustSo PictureWindow
                                                  JustSo PhotoAlbum, et alia

                                                  --
                                                  • 22. Re: How to link a table cell?
                                                    LArden Community Member

                                                    I removed those. And it is online...

                                                    http://www.12results.com/

                                                     

                                                    Any ideas? The background images were showing before...

                                                    • 23. Re: How to link a table cell?
                                                      E. Michael Brandt Community Member

                                                      so i could change the image as it is now (to show as it is now) but swap image to a slightly different color version on hover?

                                                      Forgot to reply to this part of yoru question.  Yes you could do this, but you must make the bg image considerably larger so when users increase theri font size the bg image will still fill the td.

                                                       

                                                      so i could change the image as it is now (to show as it is now) but swap image to a slightly different color version on hover?

                                                       

                                                      Away for a while now............................................................

                                                       

                                                      -- 

                                                      E. Michael Brandt

                                                      www.divahtml.com
                                                      www.divahtml.com/products/scripts_dreamweaver_extensions.php
                                                      Standards-compliant scripts and Dreamweaver Extensions

                                                      www.valleywebdesigns.com/vwd_Vdw.asp
                                                      JustSo PictureWindow
                                                      JustSo PhotoAlbum, et alia

                                                      --
                                                      • 24. Re: How to link a table cell?
                                                        E. Michael Brandt Community Member

                                                        Ahh, spotted the trouble.  Change background-image style to this:

                                                         

                                                            background-image: url(../images/videoclip-imageandcolor-tr.gif) ;

                                                         

                                                        and then add this position style right below it:


                                                            background-position: bottom right;

                                                         

                                                        Now it'll work.

                                                         

                                                        -- 

                                                        E. Michael Brandt

                                                        www.divahtml.com
                                                        www.divahtml.com/products/scripts_dreamweaver_extensions.php
                                                        Standards-compliant scripts and Dreamweaver Extensions

                                                        www.valleywebdesigns.com/vwd_Vdw.asp
                                                        JustSo PictureWindow
                                                        JustSo PhotoAlbum, et alia

                                                        --
                                                        • 25. Re: How to link a table cell?
                                                          LArden Community Member

                                                          Thanks! Now the background images work great but hover colors don't happen of course. Is there a way to to a background image swap on hover?

                                                          • 26. Re: How to link a table cell?
                                                            E. Michael Brandt Community Member

                                                            Sure, just add the new image as background in this selector:

                                                             

                                                            .vidA a:hover{
                                                                 background-color:#C4F894;
                                                                   background-image: url(...);
                                                            }    

                                                             

                                                            This might be a good time to mark this as Correctly Answered so the folks who help will not need to click on this thread any more.  Thanks!

                                                             

                                                            --

                                                            E. Michael Brandt

                                                            www.divahtml.com
                                                            www.divahtml.com/products/scripts_dreamweaver_extensions.php
                                                            Standards-compliant scripts and Dreamweaver Extensions

                                                            www.valleywebdesigns.com/vwd_Vdw.asp
                                                            JustSo PictureWindow
                                                            JustSo PhotoAlbum, et alia

                                                            --
                                                            • 27. Re: How to link a table cell?
                                                              LArden Community Member

                                                              Hmmm...nope...what did I do wrong?

                                                               

                                                              .vidA a {
                                                                  text-decoration: none;
                                                                  display:block;
                                                                  background-image: url(../images/videoclip-imageandcolor-tr.gif) ;
                                                                  background-position: bottom right;
                                                                  background-color:#B1D6D5;
                                                                  padding:10px;
                                                              }
                                                              .vidA a:hover{
                                                                  background-image: url(../images/videoclip-imageandcolor-tr-over.gif) ;
                                                              }
                                                              .audioA a {
                                                                  text-decoration: none;
                                                                  display:block;
                                                                  background-image: url(../images/audioclip-imageandcolor-tr.gif) ;
                                                                  background-position: bottom right;
                                                                  background-color:#B1D6D5;
                                                                  padding:10px;
                                                              }
                                                              .audioA a:hover{
                                                                  background-image: url(../images/audioclip-imageandcolor-tr-over.gif) ;
                                                              }

                                                               

                                                              i did make the new images, export wizard in Fireworks, saved as gif with index transparency after I just lightened up the color a little.  Any ideas?

                                                               

                                                              Thanks for hanging in here with me!

                                                              • 28. Re: How to link a table cell?
                                                                E. Michael Brandt Community Member

                                                                http://www.12results.com/images/audioclip-imageandcolor-tr-over.gif is not on the server.  Gotta upload it!

                                                                 

                                                                --

                                                                E. Michael Brandt

                                                                www.divahtml.com
                                                                www.divahtml.com/products/scripts_dreamweaver_extensions.php
                                                                Standards-compliant scripts and Dreamweaver Extensions

                                                                www.valleywebdesigns.com/vwd_Vdw.asp
                                                                JustSo PictureWindow
                                                                JustSo PhotoAlbum, et alia

                                                                --
                                                                • 29. Re: How to link a table cell?
                                                                  LArden Community Member

                                                                  Duh...I had them named wrong in the stylehseet.  Ooops :-)

                                                                   

                                                                  Now it works great! Thanks so much for all of your help! I really appreciate it!

                                                                  • 30. Re: How to link a table cell?
                                                                    E. Michael Brandt Community Member

                                                                    Excellent!  Glad we got it working.  Happy to help.

                                                                     

                                                                    --

                                                                     

                                                                    E. Michael Brandt

                                                                    www.divahtml.com
                                                                    www.divahtml.com/products/scripts_dreamweaver_extensions.php
                                                                    Standards-compliant scripts and Dreamweaver Extensions

                                                                    www.valleywebdesigns.com/vwd_Vdw.asp
                                                                    JustSo PictureWindow
                                                                    JustSo PhotoAlbum, et alia

                                                                    --