Basically, I need to figure out a way to change multiple images/buttons with one click. Pls see attachment.
Here I have a topFrame and a mainFrame. Buttons in topFrame will bring different content in mainFrame. And here comes the complicated part. I have a little "Hierarchy Chart" at the bottom left hand corner that explains how they are tiered. The Hexagon represents each client. The Triangle represents each project. The Star represents the numbers of images of each project (3 stars = 3 images). The Big Image is where the images are shown. ImageA and ImageB are graphic information of the Big Image.
So, let's say I click on Button1, mainFrame will automatically load the 1st image of the 1st project of the 1st client. Corresponding graphic information of that image will also be loaded (ImageA + ImageB). Invisible /previous/next buttons will show when hovered. Once the next button is clicked, BigImage will load the 2nd image of the 1st project of the 1st client. ImageA and ImageB will change as well. And the 1st Star will no longer be highlighted but the 2nd Star since it represents the 2nd BigImage.
And another tricky part is that both the Stars and the Triangles are buttons as well. So viewers can either click the previous/next button to navigate through the images, they can also click the Stars or the Triangles to achieve the same effect. They serve as both button as well as indicator.
I hope I explain myself clearly. And many thanks!!!!
It's not a problem to change multiple images with one click (the click can call a function which makes the different actions). The problem is only how to define the structure of your page...
Then, you can probably build one script to manage the page (with this functions) and load dynamically different scripts(*) (one script for each button or content) to define the different variables (projectNumber, clientNumber, imageNumber... etc.) and load (or pre-load) the different images.
Perhaps, this old thread could give you some ideas to work progressively...