i am creating a web-album for my site. what i am trying to do, is on the homepage, if a user clicks on a specific thumbnail, it will got to the album using a #image[number] tag.

i have this code so far for changing the images based on the tag

<a name="image1">
<script language="JavaScript">
LargeImage.src="images/image1.jpg"
</script>

the problem that i am having is that this code, placed with the rest of the code, always executes, leaving me with a final image of Image1.jog even if i have not sent the #image1.
Where should i put this code so that it will only execute when i go directly to it. Thanks
Matt

If I understood correctly, what you need is:

<a href="images/image1.jpg"><img src="thumb_image1.jpg"></a>
<a href="images/image2.jpg"><img src="thumb_image2.jpg"></a>

sorry. i miswrote.
earlier in the code i have thumbs and the main image already creaded
[thumb1]
[thumb2] etc.
[largeimage]

i have it so that when the page is first loaded, the largeImage box is initially created with Default.jpg, and when the user clicks on a thumbs it will change the image.
what i want to be able to do, is when a user links to this album from another page, depending on the thumb that is clicked on the other page, it will borwse with a #image1, #image2, etc. and i want this, if called, to change the image src in LargeImage.
thanks
~matt

i essentially want to be able to have several different pages on the same page, assessed by using # tags. The problem i am having is that it runs through the entire code, where what i want is for this to happen:

<a name="page1">
..
..
..
..

<a name="page2">..
..
..
..
..

<a name="page3">
..
..
..
..

Where the code will, if sent #page1, run through the lines for page 1, and then end, without running in order from 1,2,3 etc..

OK, so if you are saying that the URL on the browser when the page load will contain #image27.jpg and that is what you want to "load" in the <img> tag then try:

<script type="text/javascript">
window.onload=function(){
  if( String(location.hash).length > 1 )
  {
    //get the name of the image from the url
    var image = location.hash.substring(1);
   
    //obtain a reference to your <img> 
    var img=document.getElementById("bigImg");

    //now reassign a new image path to <img>
    //assuming all the images are stored in an Images folder - ex
    // http://yoursite.com/Images/
    img.src='/Images/'+image;
  }
};
</script>

<!-- this is your initial img tag -->
<img id='bigImg' src='/Images/Default.jpg' />

Edited 6 Years Ago by hielo: n/a

ok thanks, now what would you suggest for my second post?
so that ONLY ONE function will execute for each # tag. I now need to do that to change pages of thumbnails.
Thanks
~Matt

I don't understand what you are trying to do, but if you want to call a single function upon clicking of your thumb images you can do something like:

<script type="text/javascript">
function thumbClick(img)
{
  //here you can use img.id to find out which of the thumbs was clicked
  //and do whatever it is you are trying to do
  alert( img.id + " was clicked" );
}
</script>

<img id="thumb1" src="/Thumbs/image1.jpg" onclick="thumbClick(this)" />
<img id="thumb3" src="/Thumbs/image3.jpg" onclick="thumbClick(this)" />
<img id="thumb5" src="/Thumbs/image5.jpg" onclick="thumbClick(this)" />

Ok. I Found What I Needed To Do. Thanks to everyone who helped.

This article has been dead for over six months. Start a new discussion instead.