RETURN TO MAIN IFRAME TUTORIAL

Side-By-Side Double Iframes

STATIC IFRAME EXAMPLE WINDOWS:

"FRAME3"

"FRAME4"

(These two frames are borderless and the color of the
content pages matches the table so they are invisible)


STRUCTURE:
An iframe page that has your two windows to other pages: iframes.
(this is my iframe page and has the iframes FRAME3 and FRAME4 above)

A link page that will be seen in the first iframe. This page has your list of links.
(my links page: http://www.samisite.com/moreiframes/frame3link.htm and it is seen in FRAME3)

Then you decide what pages you want to show in the second frame.
(I have placed each image that appears in the second iframe on a separate page. These appear in my FRAME4.
You could also choose to use one really long page with anchors that stop you at different points on the page.  FAQ pages often use this technique)
http://www.samisite.com/moreiframes/frame4blank.htm
http://www.samisite.com/moreiframes/frame4spaz.htm
http://www.samisite.com/moreiframes/frame4si.htm
http://www.samisite.com/moreiframes/frame4oscar.htm
http://www.samisite.com/moreiframes/frame4silky.htm


STEP 1: CREATE AN IFRAME

Each iFrame requires one simple code put into Insert > HTML (or webgem in Trellix)
You name the iframe, you define the size and you say what page you want to display. You can also define if you want a border, scrollbars or transparency, but those are not absolutely necessary.
Modify items highlighted in blue in code as necessary to fit your site.
Put this code where you want your frame to be.

FRAMES 3 & 4: both are borderless, shown in green box above, scroll bar turned off.    
FRAME3:
<iframe name="FRAME3" src="frame3link.htm" width="100" height="280" frameborder="0" scrolling="no"></iframe>

FRAME4:
<iframe name="FRAME4" src="frame4blank.htm" width="335" height="280" frameborder="0" scrolling="no" ></iframe>

Understanding the basic iFrame code:
<iframe name="FRAMENAME" src="contentpage.htm" width="100" height="280" frameborder="0" scrolling="no"></iframe>

Code elements:
Used in samples:
What is it?
iframe name
FRAME3
FRAME4
Name of the frame (call it anything you want)
No spaces, no symbols except - and _
Multiple iframes: each iFrame needs a different name
src
frame4blank.htm
frame4spaz.htm
frame4si.htm
frame4oscar.htm
Address of the Contents page that you want to see in the frame  
Best choice: start with a basic page with an introduction, etc.
I use frame4blank.htm for this purpose
width
100
40%
Wide: Enter number of pixels for the window
Or enter the percentage for the window size
height
280
60%
High: Enter number of pixels for the window
Or enter the percentage for the window size
frameborder
1 = show a 3d edge
0 = no border
3d edge on the iFrame window
Using 0 makes the edge invisible.
scrolling
auto = browser decides
yes = always have
no = do not show
Scroll bar: if your content page is too long or wide to fit into the iFrame, then scroll bars appear automatically as needed, even without the scrolling="auto" code!
Adding scrolling="no" to your code will stop the scroll bar from showing. But be careful!  If you have content outside the window, your visitor will not be able to see it.


STEP 2: CREATE LINKS TO CHANGE THE CONTENT

Each Link to change the content must have a target defined.  
The target is the NAME OF THE FRAME where you want the page to appear.  
On this page, I use two names: FRAME3 and FRAME4. The names must be unique!!  

CSB/TRELLIX: Add target info to URL link properties as shown in this screen print
Setting for one link in Frame 3 to change Frame 4:      frame4spaz.htm" target="FRAME4  
(Leave off the final " because CSB/Trellix will add it for you)

(If using CSB3 or Trellix, disregard the _top setting shown in image below!)


HTML CODE FOR SIMPLE TEXT LINK:
Code can also be inserted manually with Insert > HTML  (webgem in Trellix)

These links are placed on the link page (frame3link.htm) and appear in Frame 3 above.
They change the content of FRAME4 because the target is defined that way:

Using "relative links" you just put in the page name, staying within the same directory:
<a href="frame4spaz.htm" target="FRAME4">SPAZ</a>
<a href="frame4si.htm" target="FRAME4">SI</a>
<a href="frame4oscar.htm" target="FRAME4">OSCAR</a>
<a href="frame4silky.htm" target="FRAME4">SILKY</a>

Using "absolute links" you put in the full url address.  This is perfect if you are calling up a page that is off-site, but can be used for links that stay within the same directory or to other subdirectories.
<a href="http://www.samisite.com/moreiframes/frame4spaz.htm" target="FRAME4">SPAZ</a>
<a href="http://www.samisite.com/moreiframes/frame4si.htm" target="FRAME4">SI</a>
<a href="http://www.samisite.com/moreiframes/frame4oscar.htm" target="FRAME4">OSCAR</a>
<a href="http://www.samisite.com/moreiframes/frame4silky.htm" target="FRAME4">SILKY</a>

Image link, rollover links, button links, etc can all be used.
Just make sure the target="" statement has the iframe defined.