Simple HTML Image Changing Question - Tech Support Forums

jinsta · November 3rd, 2004, 08:13 PM

Hey hey,

This is probably a rather basic question for most of you, but please enlighten me. I'm trying to set up a sitatuon, where there is a main image, with small thumbnails to the side of the main image....and when the user clicks on the small thumbnails, the main image changes to whatever the thumbnail picture is. Something similar to what is setup on techimo under the galleries.

Thank you for any suggestions or help!

Jin

Tekk · November 3rd, 2004, 08:37 PM

You can attain this same effect using very basic HTML frames. If you check out http://www.w3schools.com it will explain the frameset HTML tag.

There are, of course, more advanced ways to do it using scripting and such but Im guessing for your purposes its not really necessary. Of course if you want to learn let us know!

jinsta · November 3rd, 2004, 09:03 PM

i looked through the frames section of that site, as well as the images section...all under the HTML area...i couldn't find anything related to what i want to do

**Whir** · November 3rd, 2004, 09:07 PM

You could also do it with a simple Javascript script.

jinsta · November 3rd, 2004, 09:23 PM

Yeah i probably can do it with Javascript...but i'm not knowledgeable in how to write javascript....thats why i'm asking for help.

Tekk · November 3rd, 2004, 09:25 PM

Quote:

Originally Posted by jinsta

i looked through the frames section of that site, as well as the images section...all under the HTML area...i couldn't find anything related to what i want to do

It wont exactly tell you how to create the page you want but it will give you the necessary information. Basically what you want is one frame of the window to contain all the image thumbs while the main portion of the window will contain the full size image. Clicking on the thumbnail will update the main frame.

To utilize a simple frameset to do this you would need to create three different HTML pages. One that contains the image thumbnails, and then another that will contain some filler information. The third HTML page will contain the frameset tags that define how the frames will be set up.

filipino · November 3rd, 2004, 09:30 PM

neither a frame or SSI (server side includes)
go here for SSI info http://www.carleton.ca/~dmcfet/html/ssi.html

**Whir** · November 3rd, 2004, 10:06 PM

Make your layout, and then add this code.

Code:

In the <head> section, put:

<script type="text/javascript">
  function changeMe(p)
  {
    document.images.change.src=p;
  }
</script>


Then your main image tag should look something like this:

<img name="change" src="starting_image.jpg">

Then in each of the thumbnails, you want the add the function call, so that would look like this:

<img src="this_pic.jpg" onclick="changeMe('this_pic.jpg')">

Does that make any sense, or no? Obviously you'll replace "this_pic.jpg" with the whateve the filename is, including the path if necessary.

jinsta · November 3rd, 2004, 11:30 PM

yeah it does, thanks alot whir!

**Whir** · November 3rd, 2004, 11:40 PM

No problem. Post back if you have any problems.