HTML Suggestions?

[mrclark]

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

[hielo]

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>

[mrclark]

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

[mrclark]

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

[hielo]

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' />

[mrclark]

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

[hielo]

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)" />

[mrclark]

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