12 Replies Latest reply on Jul 3, 2012 3:24 PM by Torkuda

    Links to the same page


      I want to create a CSS "table". Essentialy I want to create a table with a center image and links running on its right and bottom. Each link does not link to a separate page, but changes the center image. I'm sure it might take a while, but I could force some div tags into such a formation easily, the problem is, how to I make links change an element of a page an not just link to a new page?

        • 1. Re: Links to the same page
          MurraySummers Legend

          Apply a swap image behavior to the links (which have been created as NULL links (e.g., <a href="#"... )).  Make the target of the incoming image be the large image in the left side.


          Such effects are called "Disjoint rollovers" - you can see a tutorial for them here -



          • 2. Re: Links to the same page
            Torkuda Newcomer

            This is CLOSE to what I wanted, but not quite.


            I'm gonna get more specific on my design here, probably should have been already.


            Here's how the table will work specfically. In the center is a large image. On the right we'll say is a series of five images and below are a series of five images. You click the image on the top right called "photo gallery". When you click photo gallery, the large center image changes to a large "photo gallery" image. The images below change to different recent images. Say I have five new pictures of my dog in my gallery. (For the moment we're assuming this is not a dynamic site and I update this menu manually.) You click the left most image on the bottom and that image shows up in the large center image. If you actually click the center image, you leave the page your on and go to a completely new page on the actual gallery site. Essentially this is an advanced navigation set up. I know it's possible, but I also know this will take some doing to figure out. Ideas? I'm think this should invovle some CSS, but maybe the behaviors tab can help.

            • 3. Re: Links to the same page
              Nancy O. Legend

              CSS Image Viewer. (View source to see the code.) 





              Nancy O.

              Alt-Web Design & Publishing

              Web | Graphics | Print | Media  Specialists 


              • 4. Re: Links to the same page
                Torkuda Newcomer

                I have to admit. I don't see how that helps, or is even different than what Murray already showed me.

                • 5. Re: Links to the same page
                  MurraySummers Legend

                  I think it's way too confusing for someone without a large paragraph of instructions on how to use the navigation elements.  But if you really understand the method I gave you, you can expand it to this kind of thing.  A click on the thumb on the right would have to do an image swap in the center, and apply a set text of container behavior to the bottom navigation to add the various images.  Each of those images would then do a set text of container on the center image to change the image, and add the link to teh page.  Setting this up would be excruciatingly tedious, but it would work (to deeply and profoundly confuse your visitors).

                  • 6. Re: Links to the same page
                    Torkuda Newcomer

                    I don't see how this would be all that confusing. The larger image always links out and each of the thumbnails control where to, it's that simple.


                    Kinda like the navigation on this site: http://phelous.com/



                    Is that really so complicated?

                    • 7. Re: Links to the same page
                      Torkuda Newcomer

                      I found the html that makes the swaps occur.








                      I'm still trying ot figure out how to insert a link.


                      Maybe if I could figure out how phelous created his on the site I referenced



                      I think this is the code used to turn one of the thumnails or "nodes" into a larger image.



                      <div id="views_slideshow_singleframe_main_featured_content-block_1" class="views_slideshow_singleframe_main views_slideshow_main"><div id="views_slideshow_singleframe_teaser_section_featured_content-block_1" class="views_slideshow_singleframe_teaser_section"><div class="views_slideshow_singleframe_slide views_slideshow_slide views-row-1 views-row-odd" id="views_slideshow_singleframe_div_featured_content-block_1_0"> 

                        <div class="views-field-field-tsrimg-fid">

                                      <span class="field-content"><a href="/node/1261" class="imagecache imagecache-medium imagecache-linked imagecache-medium_linked"><img src="http://phelous.com/sites/default/files/imagecache/medium/bloodrayne-phel.jpg" alt="" title=""  class="imagecache imagecache-medium" width="508" height="361" /></a></span>


                      • 8. Re: Links to the same page
                        MurraySummers Legend

                        I haven't used a preload for images in about 5 years!


                        On static HTML pages, the only way to get a link on a swapped image would be to use custom javascript (Spry might have some tricky way to do that, but I'm not a Spry expert - Altruistic Gramps might have more to say about how to use Spry to do something like that).


                        Assuming that you are clicking on a trigger image to cause a disjoint rollover, the code for that effect would look something like -



                        function addLink(linkNum) {

                        var Link=new Array();

                        Link[1] = 'path1.html';

                        Link[2] = 'path2.html';

                        Link[3] = 'path3.html';

                        Link[4] = 'path4.html';



                        newLink = Link[linkNum];

                        return newLink;




                        <a href="#" onclick=""MM_swapImage('tabContact','','images/on/contact23.gif',1);document.getElementBy Id('imgLink').href=addLink(1);">trigger</a>



                        <td><p><img src="_img/btnwware.jpg" width="165" height="50"></p>

                          <p>Now is the time for all good men</p></td>



                        <div><p><img src="_img/btnwware.jpg" width="165" height="50"></p>

                        <p>Now is the time for all good men</p></div>

                        <p><a href="path1.html" id="imgLink"><img name="someImage" id="someImage" src="_img/btnwware_mo.jpg"></a></p>


                        and you would need to replace "path1.html", etc., with the real path to the linked pages.


                        So - the code in blue is the javascript function that would determine which link you want based on which trigger image is clicked (each trigger image would look like the one in green and would pass a different number to the js function).


                        The code in red is the code for the larger image that would receive the value of the link returned from the addLink() function.


                        Make sense at all?

                        • 9. Re: Links to the same page
                          Nancy O. Legend
                          Maybe if I could figure out how phelous created his on the site I referenced

                          Phelous is a Drupal site that uses jQuery Cycle along with something called SingleFrame Div Slideshow Rotator script (probably a Drupal module).




                          Nancy O.

                          • 10. Re: Links to the same page
                            Torkuda Newcomer

                            I'm kinda getting it. Can we start a little smaller and work our way up?


                            What say I want to do something simple like this:


                            We'll take the tutorial you gave me: http://www.dwfaq.com/tutorials/basics/disjointed.asp


                            And use the download file from there.


                            The teacher here created a table with a series of images.


                            To help narrow down the coding I changed "contact.gif" in the "on" folder of the images folder to "contact23.gif".


                            On the "practice" page I clicked the "home" image, went over to the behaviors tab. I then selected "swap image" turning off "restore images on mouseout". In the images menu I selected "image"tabcontent"" and in "set source to" I selected "contact23.gif" as explained earlier. Of course now I changed "onmouseover" to "onclick" in the behaviors menu, again to simplify matters.


                            Now of course the image which has the id of "tabcontent" will change to "contact23.gif" when I click the home image. How do I make "image23.gif" trigger a link to https://www.google.com/ ?


                            For now I want to know how to embed just the one link in an image swap. Then we'll work up to imbedding multiple links with multiple images.

                            • 11. Re: Links to the same page
                              MurraySummers Legend

                              There is no easy way to do what you want to do without getting your hands into the code somewhere.


                              JAVASCRIPT METHOD 1


                              <a href="#" onclick="MM_swapImage('tabContact','','images/on/contact23.gif',1);document.getElementByI d('imgLink').href='http://www.google.com';">trigger</a>



                              <td><p><img src="_img/btnwware.jpg" width="165" height="50"></p>

                                <p>Now is the time for all good men</p></td>



                              <div><p><img src="_img/btnwware.jpg" width="165" height="50"></p>

                              <p>Now is the time for all good men</p></div>

                              <p><a id="imgLink"><img name="tabContact" id="tabContact" src="images/contact23.gif"></a></p>


                              When you click the trigger, the swapped in image will have a link.  Before clicking the trigger, it does not.


                              BEHAVIOR METHOD



                              You can achieve the same thing using the DW behavior "SET TEXT OF CONTAINER".  It's a bit tedious but you would do it this way:


                              1.  Put the center image into a container with an ID (a div works great for this).

                              2.  Create a new page to be used as a temporary tool.  On this new page, put your image to be swapped into the actual page.  Link that image to the desired page (e.g., http://www.google.com).  Save that page at the same location as the actual page. Copy the code for the image and its link.  For example, you will have something like this -


                              <a href="http://www.google.com"><img src="whatever.gif" alt="whatever"></a>

                              3.  On the actual page, select the trigger image, and apply a Set Text of Container behavior.  When the dialog for this behavior opens, select the container ID mentioned in #1 above, and paste the clipboard into the area for the text.  Click OK.

                              4.  Set the event on the behavior to "onclick".


                              That'll do the same thing.


                              Do those work for you?

                              • 12. Re: Links to the same page
                                Torkuda Newcomer

                                I'm not trying to avoid the code, I'm trying to break down how it works. And, please don't take offence, but I tried to work with a construct you've referenced yourself, it's kind of off putting that you keep reaching for code from a site I've never seen before. I can figure out most of was isn't relivent and what is, but it would nice if we could try to work from the same template.


                                That being said, I think I can decipher what you wrote pretty easily. Thanks.