For the above iframe (inline frame) drag an HTML object onto your page make it 400x300 then paste this:
<iframe name="iframe1" src="
if4.html
" style="
width:400px
;
height:300px
; border: 1 solid gold" scrolling="no"></iframe>
For this bottom iframe drag another HTML object onto your page and make it 400x100 you can put them where you want and make them any size you want as well.
if4.html
is the name of the page you want to load into the iframe when the page first opens.
<iframe name="iframe2" src="
if4a.html
" style="
width:400px
;
height:100px
;" frameborder="0"> </iframe>
You can change the
width
and
height
so they match your images, same with the text HTML object make those width and heights the same as the code.
if4a.html
is the name of the page you want to load into the iframe when the page first opens.
Now on this same page paste this javascript into the header (the main IFRAME page again)
<script>
function twoFrameChange(image,text){
top.iframe1.location.href = image;
top.iframe2.location.href = text;
}
</script>
Make a page in web studio and call it
if1
put your large image on at pages top left hand corner.
Now make another page for your text and call it
if1a
make the text object 10 px less in width as your text iframes width, so you don't get a bottom scrollbar.
You can make more pages if you want later and call them if2 and if2a and so on.
Okay back to the main IFRAME page again.
Now copy over your large image to this page and check the proportional resize box in properties and I made my thumbnails 80 wide.
Let's do the final link now and that will be it.
Add/edit link and paste this code in there where it says enter url:
javascript:twoFrameChange('
if1.html
','
if1a.html
')
'
if1.html
' if1 is the name of your page with the large images and '
if1a.html
' the page with the text.
These will match the pages you want to load into the two iframes, so if the page name was "if2" it would be '
if2.html
' and so on.