Skip navigation
Currently Being Moderated

Links to the same page

Jun 29, 2012 1:59 PM

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?

 
Replies
  • Currently Being Moderated
    Jun 29, 2012 2:14 PM   in reply to Torkuda1234

    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 -

     

    http://www.dwfaq.com/tutorials/basics/disjointed.asp

     
    |
    Mark as:
  • Currently Being Moderated
    Jul 2, 2012 2:09 PM   in reply to Torkuda1234

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

    http://alt-web.com/DEMOS/CSS-Image-Viewer.shtml

     

     

     

    Nancy O.

    Alt-Web Design & Publishing

    Web | Graphics | Print | Media  Specialists 

    http://alt-web.com/

     
    |
    Mark as:
  • Currently Being Moderated
    Jul 2, 2012 3:38 PM   in reply to Torkuda1234

    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).

     
    |
    Mark as:
  • Currently Being Moderated
    Jul 3, 2012 12:24 PM   in reply to Torkuda1234

    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 -

     

    <script>

    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;

    }

    </script>

    </head><body>

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

    <table>

    <tbody><tr>

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

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

    </tr>

    </tbody></table>

    <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?

     
    |
    Mark as:
  • Currently Being Moderated
    Jul 3, 2012 12:26 PM   in reply to Torkuda1234
    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.

     
    |
    Mark as:
  • Currently Being Moderated
    Jul 3, 2012 2:53 PM   in reply to Torkuda1234

    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);do cument.getElementById('imgLink').href='http://www.google.com';">trigger</a>

    <table>

    <tbody><tr>

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

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

    </tr>

    </tbody></table>

    <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?

     
    |
    Mark as:

More Like This

  • Retrieving data ...

Bookmarked By (0)

Answers + Points = Status

  • 10 points awarded for Correct Answers
  • 5 points awarded for Helpful Answers
  • 10,000+ points
  • 1,001-10,000 points
  • 501-1,000 points
  • 5-500 points