Opening thumbnail images inside one html doc instead of many

[Ryanzbane]

Let me set up what my site looks like first, then I'll delve into the question. My site has frames, top frame, left frame, and a main frame. The left frame contains numerous thumbnail images that I want the user to click on and get a larger version of said image inside the main frame. The problem I'm having is I have to create a separate html page for each (larger)image (and it has become incredibly tedious), instead of just having a main.html with some sort of way of opening multiple (not more then one image at a time, but have an image replace the previous one when a new thumbnail is clicked) images inside of it. How can I do this? Would I use a div or what? I'm just learning so any help would be great. If I haven't explained well enough, I'll be happy to restate the question if you wish. Please help ! )

 

[vacunita]

Since you haven't shown us what the thumbnail code to open the larger image. If such is the case, then you can target the main frame from the links.

For example:

<a href="path/to/bigimage.jpg" target="name_of_main_frame">thumbnail</a>

----------------------------------
Ignorance is not necessarily Bliss, case in point:
Unknown has caused an Unknown Error on Unknown and must be shutdown to prevent damage to Unknown.

 

[Ryanzbane]

Alright, I attempted this, but I lose my background image ect. in the main frame. It opens the larger image, but the background turns white. I'm wanting to keep the main frame looking the same, but just switch the images that are loaded into it when the user clicks the thumbnails.

 

[vacunita]

In that case, you are going to need to use Javascript, to alter an image tag's src attribute placed in the main frame.

Assuming you have an image tag in the main frame that looks like this:

<img name="largeimage" src="defaultimg.jpg">

you can use Javascript in your thumbnail links to change the source to whatever the thumbnail points to:

<a href="#" Onclick="[red]name_of_frame[/red].[blue]document.images[/blue].[red]largeimage[/red].[blue]src[/blue]='path/to/large/image'">thumbnail</a>

change the red parts to match your frame and image names.




----------------------------------
Ignorance is not necessarily Bliss, case in point:
Unknown has caused an Unknown Error on Unknown and must be shutdown to prevent damage to Unknown.