Go to page and display correct image

marilynn.fowler

06-10-2007, 09:57 PM

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

Actinia

06-12-2007, 02:14 PM

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:

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.

marilynn.fowler

06-12-2007, 10:09 PM

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?

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:

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.

glenngv

06-12-2007, 10:33 PM

Pass the corresponding image src in the URL.
<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:
<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.

marilynn.fowler

06-12-2007, 10:47 PM

Thank you so much. I'm going to give it a whirl!
(10 minutes later)
It worked!