Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 5 of 5
  1. #1
    Regular Coder
    Join Date
    Aug 2002
    Location
    San Francisco
    Posts
    455
    Thanks
    19
    Thanked 15 Times in 15 Posts

    Go to page and display correct image

    http://www.archetile.com/botanica.html

    Currently when you click on one of the thumbnails it takes you to one of 3 pages , A-G, H-P, or R-Z. What I would like to have happen is that when you click the thumb and go to one of those 3 pages, the "starting image" would actually be the one they originally clicked to get there. So, for example, if they click the Gloriosa Superba thumbnail, when they go to the A-G page the enlarged photo would be of Gloriosa Superba.

    How do I "pass" that value to the next page? Currently the javascript resides at http://www.archetile.com/sheets/archetile.js

    PS: Please don't mock the table. It was my transition period from table-based layout to complete CSS positioning. : )
    Outside of a dog, a book is man's best friend. Inside of a dog it's too dark to read. Groucho Marx

  • #2
    Regular Coder Actinia's Avatar
    Join Date
    Feb 2007
    Location
    Essex, UK
    Posts
    250
    Thanks
    1
    Thanked 23 Times in 22 Posts
    You can pass an identifier to the called page by following the URI with a query and the identifier, such as botanica1.html?Gloriosa.

    Then in the called page, a script such as:
    Code:
    var URL = location.href;
    var query = location.search;
    will return the query string (in this case 'Gloriosa').

    You can then use this as you will.

  • #3
    Regular Coder
    Join Date
    Aug 2002
    Location
    San Francisco
    Posts
    455
    Thanks
    19
    Thanked 15 Times in 15 Posts
    Javascript is not my forte, so I'm unclear as to how to implement the two var statements on the called page. Is this something that can go in the external javascript file or does it have to go on the called page? And how will my visited page know to pull up the proper image and text?

    Quote Originally Posted by JohnRostron View Post
    You can pass an identifier to the called page by following the URI with a query and the identifier, such as botanica1.html?Gloriosa.

    Then in the called page, a script such as:
    Code:
    var URL = location.href;
    var query = location.search;
    will return the query string (in this case 'Gloriosa').

    You can then use this as you will.
    Outside of a dog, a book is man's best friend. Inside of a dog it's too dark to read. Groucho Marx

  • #4
    Supreme Master coder! glenngv's Avatar
    Join Date
    Jun 2002
    Location
    Philippines
    Posts
    11,068
    Thanks
    0
    Thanked 256 Times in 252 Posts
    Pass the corresponding image src in the URL.
    Code:
    <A onMouseOver="showProject('anemone',anemonetext); return true;"
    	HREF="botanica1.html?images/botanica/anemone.jpg"><IMG SRC="images/botanica/anemone_t.jpg" ALT="anemone"></A>
    Then put this in the <head> of botanica1.html:
    Code:
    <script type="text/javascript">
    window.onload = function(){
       if (location.search.length>1){
          document.getElementById("placeholder").src = location.search.substring(1);
       }
    }
    </script>
    Do the same for botanica 2 & 3.
    Glenn
    ____________________________________

    My Blog
    Tower of Hanoi Android app (FREE!)
    Tower of Hanoi Leaderboard
    Samegame Facebook App
    vBulletin Plugins
    ____________________________________

  • #5
    Regular Coder
    Join Date
    Aug 2002
    Location
    San Francisco
    Posts
    455
    Thanks
    19
    Thanked 15 Times in 15 Posts
    Thank you so much. I'm going to give it a whirl!
    (10 minutes later)
    It worked!
    Last edited by marilynn.fowler; 06-12-2007 at 11:01 PM. Reason: addendum
    Outside of a dog, a book is man's best friend. Inside of a dog it's too dark to read. Groucho Marx


  •  

    Posting Permissions

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