5 Replies Latest reply on Jun 22, 2014 4:08 PM by Locrian

    Can a link only change one cell in a table?

    Locrian

      I've been learning Dreamweaver from a textbook, but I'm still pretty new to it, and I'm not sure what terminology to use here.  I want my site to have a link that just changes one cell in a table when you click the link, rather than having it go to a whole new page.  For example, you click a link and a picture changes but the rest of the site stays the same.  So far, I've been doing this by just making several duplicates of an html file, and then just changing that one cell in each copy.  It works, more or less, but then whenever I want to make a change to my page, I have to make the same change in all the copies.  There's got to be a better way, right?

       

      If this is too complicated to explain in a forum, perhaps someone could just tell me if there's a term for what I'm trying to do, and then I can just look for it in my book or search for it online.

       

      Thanks for your help.  Oh, and the version I'm using is CS5.

        • 1. Re: Can a link only change one cell in a table?
          MurraySummers Level 8

          What you are asking for is called a 'disjoint rollover', which means 'something happens over here, and the effect is seen over there'. It's simple to do even manually. Take a look at this page -

           

          http://www.murraytestsite.com/locrian.html

           

          The code on the page is this -

           

          <!doctype html>

          <html>

          <head>

          <meta charset="UTF-8">

          <title>Untitled Document</title>

          </head>

           

           

          <body>

          <p><a href="#" onclick="document.getElementById('image').src='_img/masthead-logo1.jpg'">link</a></p>

          <table width="347" border="1">

            <tr>

              <td>  </td>

              <td>  </td>

              <td>  </td>

            </tr>

            <tr>

              <td>  </td>

              <td>  <img src="_img/masthead-logo.jpg" width="347" height="120" alt="" id="image"/></td>

              <td>  </td>

            </tr>

            <tr>

              <td>  </td>

              <td>  </td>

              <td>  </td>

            </tr>

          </table>

          </body>

          </html>

           

          I used a table because you specifically asked about tables, but I wouldn't recommend using them for anything other than tabular data, and certainly not for general layout. The code could be re-written like this to completely eliminate the table -

           

          <!doctype html>

          <html>

          <head>

          <meta charset="UTF-8">

          <title>Untitled Document</title>

          </head>

           

           

          <body>

          <p><a href="#" onclick="document.getElementById('image').src='_img/masthead-logo1.jpg'">link</a></p>

          <div><p><img src="_img/masthead-logo.jpg" width="347" height="120" alt="" id="image"/></p></div>

          </body>

          </html>

           

          Better, huh?

          • 2. Re: Can a link only change one cell in a table?
            Nancy OShea Adobe Community Professional & MVP

            If your text book is teaching you to use tables for layouts, it's sorely outdated.  That was a popular approach in the 1990's but in 2014, we use CSS for layouts.

             

            I'm not entirely sure I understand what you're doing.  Clicking a link typically opens a new site page.

             

            In some cases, a button or link may be used to toggle the display of another page element.  See link below for code & example.

            §2257 COMPLIANCE button - JSFiddle

             

            In another example, you may have a long page of content.  Let's say you want to provide links to content lower on the same page.

            jQuery Smooth Scrolling with Fixed Layout

             

            In this final example, thumbnail sized images are linked to full-size images which appear inside a modal window.  This demo uses jQuery Fancybox2.

            Alt-Web Templates :: CSS Semi-Liquid, Photo Proof Sheet

             

            Do any of my examples above help you?

             

             

            Nancy O.

            • 3. Re: Can a link only change one cell in a table?
              Locrian Level 1

              Thanks Murray, that was very helpful.

              • 4. Re: Can a link only change one cell in a table?
                MurraySummers Level 8

                By the way, my example was the "hand coder method". DW also has a built in method (a behavior called "Swap Image" which you access from the Behavior panel). To use that method, you would click in your trigger link (in Design or Code view), then in the Swap Image dialog that appears, you would select the target image that you want to swap out and use the Set source to: field to browse to the incoming image). Select the two options below that field and click OK, and you are done.

                 

                And I definitely agree with Nancy about the use of tables.

                • 5. Re: Can a link only change one cell in a table?
                  Locrian Level 1

                  Perfect, thanks to both of you.  And you're right Nancy, my DW book is kind of old.