I'm a graphic designer and knows very little about coding. I am currently working on my website and am stuck with the problem stated below. I'm so lost that I'm not even sure how I should go by this. Should I use javascript or jQuery or something else? I'm hoping to achieve this in the simplest way possible as I'm not familiar with any programming languages. Pls help!!!

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