Results 1 to 12 of 12
  1. #1
    Member
    Join Date
    January 18th, 2005
    Posts
    199
    Can someone explain or direct me to a page that explains how the following is done?
    On this page:Fossil

    There is the main picture along with two small pictures underneath. When one of the small pictures (which is a link) is clicked on it changes the large picture without going to a different page.

    Thanks for any help.

  2. #2
    Roll Tide mobilebadboy's Avatar
    Join Date
    January 18th, 2005
    Location
    Mobile, Alabama
    Posts
    1,220
    Javascript will get that done, something like this.

    Put this between your HEAD tags:

    <pre class="ip-ubbcode-code-pre">
    &lt;script language="javascript" type="text/javascript"&gt;

    x = 2;

    function swapImg() {
    switch (x) {

    case 1:
    MySwap.src = "first_image.gif"
    x = 2
    return(false);

    case 2:
    MySwap.src = "second_image.gif"
    x = 1
    return(false);

    }
    }
    &lt;/script&gt;
    </pre>
    Then somewhere in your body:

    <pre class="ip-ubbcode-code-pre">
    &lt;img id="MySwap" name="MySwap" src="first_image.gif" /&gt;&lt;br /&gt;
    &lt;a href="#" onclick="swapImg();"&gt;1st Image&lt;/a&gt; &ampnbsp;|&ampnbsp;
    &lt;a href="#" onclick="swapImg();"&gt;2nd Image&lt;/a&gt;
    </pre>
    There may be an easier way, but that works. firstimage.gif will be the image you want to show originally (such as Tortoise on that page).

    Shawn Kerr (.com) | Disney World | SEC Football

  3. #3
    Member
    Join Date
    January 18th, 2005
    Posts
    86
    It's a layer switching. They use JavaScript to do this.

  4. #4
    Member kmkimmo's Avatar
    Join Date
    January 18th, 2005
    Location
    Texas Coast
    Posts
    133
    it looks like some pretty basic Javascript using onClick.

    Basically you give the large image an id of sorts (name='bigimage'), and then create an onClick handler that swaps the image file for the named image.

    If you are familiar with Javascript, you could figure this out by having a look at the source.

    I would suggest visiting some Javascript script sites and searching for onClick and 'swap image'.
    - I am not young enough to know everything

  5. #5
    Member kmkimmo's Avatar
    Join Date
    January 18th, 2005
    Location
    Texas Coast
    Posts
    133
    Shawn beat me to it.

    ...yeah....what Shawn said.
    - I am not young enough to know everything

  6. #6
    Member
    Join Date
    January 18th, 2005
    Posts
    86
    It's not only an image swapping. If you look on the right, the information changes too.

  7. #7
    Member
    Join Date
    January 18th, 2005
    Posts
    199
    Thanks mobilebadboy, Som and kmkimmo. I'll experiment with what you provided above and see if I can get it to work with what I'm doing.

  8. #8
    Roll Tide mobilebadboy's Avatar
    Join Date
    January 18th, 2005
    Location
    Mobile, Alabama
    Posts
    1,220
    <BLOCKQUOTE class="ip-ubbcode-quote"><font size="-1">quote:</font><HR>It's not only an image swapping. If you look on the right, the information changes too. <HR></BLOCKQUOTE>
    You are correct, but I answered the question exactly how it was asked.

    Shawn Kerr (.com) | Disney World | SEC Football

  9. #9
    Member
    Join Date
    January 18th, 2005
    Posts
    86
    <BLOCKQUOTE class="ip-ubbcode-quote"><font size="-1">quote:</font><HR>Originally posted by mobilebadboy:
    You are correct, but I answered the question exactly how it was asked. <HR></BLOCKQUOTE>
    I answered exactly how that page was done.

  10. #10
    Member kmkimmo's Avatar
    Join Date
    January 18th, 2005
    Location
    Texas Coast
    Posts
    133
    Actually, I am not sure there is any layer switching going on...

    There is definitely image swapping, and javascript is used to change the selected option on the drop down once the link is clicked...

    Som, what do you see that has anything to do with layers?

    Frankly, emione didn't ask about the page...emione asked about the image change after clicking a link.
    - I am not young enough to know everything

  11. #11
    Member
    Join Date
    January 18th, 2005
    Posts
    86
    The JavaScript functions are in one of the following files:

    /includes/flyopen.js
    /includes/rollover.js
    /includes/cleartext.js

    If you look at the page source, they use the layer method (document.layers for Netscape, document.all for IE)

  12. #12
    Member kmkimmo's Avatar
    Join Date
    January 18th, 2005
    Location
    Texas Coast
    Posts
    133
    a reference to document.layers for Netscape, document.all for IE does NOT mean they are switching layers. In fact the source code uses these references to determine the browser for further scripting. Fairly common.

    I looked at the included .js files yesterday before I posted. The onClick event triggers a function called 'rollovertwo' which does nothing but swap images and call a popup function.

    I'm usually not one to argue to this point, but you still haven't answered the question. The truth is, the functions called when the link is clicked do nothing with layers...you can clearly see this if you actually look at the .js files.
    - I am not young enough to know everything

  13. Newsletter Signup

+ Reply to Thread

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •