Replace buttons with images

Once again I request your help. I hope it’s a simple fix.
I built my site with help from Tumult Forum 2 years ago, and recently added a page based on another Forum contributor Jim Scott - iFrame_Demo Project_JHSv1. I revised the Iframe to load a series of my pages.

I just need to replace the text buttons “DOC 1”, “DOC 2”, etc, with my square image buttons (which match the buttons on the other pages of my site). If you could possibly make a couple of the button images below the Text buttons functionable, I will do the rest. (I want to replace and remove the Text buttons).

And if by chance you might have a simple suggestion as to how I can adjust the landing position of my html pages in the Iframe, that would also be appreciated, but not necessary. Some land centered as desired, but some land way to the top of the frame.

I apologize in advance - several of the loading pages contain sound (you might want to mute them).
This is just a personal portfolio site for fun. As mentioned in the past, my ability to code is poor.

THANK YOU in advance for any help you can provide.

Bob M

Attached is the page (in progress) labeled “index-odds” Hype doc.
(I can also attach the full site Hype doc, if needed.)

index-odds.zip (1.5 MB)

It looks like the primary issue you hit was that the "Go to URL…" action doesn't target a specific iframe.

It appears that you have untitledFunction() that is some code that looks like it was attempting to solve this problem. It seems very close, you probably just need to make sure the right class names are assigned to the buttons and you have the right ID for the query selector.

However instead it looks like you went with an approach to use Inner HTML <a> tags to target the right iframe.

Given that, I would say that the easiest way to do the conversion would be to take the Inner HTML of your text buttons now, and paste that into the Inner HTML of the image buttons. Instead of the "Doc 1" text you can put in a div that fills up the inner space. It would look something like:

<a href="http://echo-boy.com/odds-i-frame.html" target="iframe_a"><div style="width:100%;height:100%">&nbsp;</div></a>

Hmm... I'm not sure I see the particular problem, can you say which button to click to see a good and bad example of the centering?

Jonathan - thank you for responding. As usual your suggestion worked. I attached your code to each of my buttons and they worked great. I had tried something similar, but did not include the "width and height".

My second question, again is not an emergency, but I am attaching the revised Hype doc, and a jpeg, hopefully illustrating the flaw. I need to learn how to make my html page land center in the i-frame.

Thanks again for your response. I will continue to improve my pages as best I can.
Bob M

index-odds.zip (1.5 MB)

I'm not behind my mac right now so I can't open the file. But I figure the solution would be with css with a margin-top or flexbox align.

I'd probably take the approach of making each of the iframe documents (like http://echo-boy.com/frame.html be responsible for their centering.

There's many approaches; if these are Hype documents then you could just use Flexible Layout. If everything is in a group, then you can turn on all the pins to keep it centered.

You'd also need to revise the parent's "iFrame Container" element's inner HTML to not use a fixed width/height. Otherwise it will center to this larger frame, which seems like it is incorrect Instead try something like:

<iframe src="http://echo-boy.com/art-blank.html" name="iframe_a" width="100%" height="100%"></iframe>