Sami's Site: CSB - Trellix Support and Tests
|
   |
Test Index · CSB4 Rollover Links · Link Styles 1 · Link Styles 2 · Link Styles 3 · iFrame Tutorial - IFrames described in detail! · Arrowhead · Excel · Color Blind · Websafe Fonts and tests · Make an Alert Box · Webgem Placeholder Images · Streaming Audio · LINK HOVER TOOLTIP · OverLIB tooltip · Disguise Email · Quote of the Month · Map to your location! · Link Border Test · FORUM
iFrame Tutorial - IFrames described in detail!
Inline Frames (IFrames) are windows cut into your webpage that allow your visitor to view another page on your site or off your site without reloading the entire page.
IFRAME EXAMPLES:
The table below actually demonstrates 2 different types of iFrames at the same time!
1. SCROLLING IFRAME: scrolling content, only one page viewable
2. STATIC IFRAME: static (no scrolling movement), links change content.
|
The contents of the pages shown in the window wrap to fit the window.
STATIC IFRAME EXAMPLE WINDOW: "FRAME1"
|
|
pages in the window above
|
STATIC IFRAME EXAMPLE WINDOW: "FRAME2" - CHANGE SCROLL BAR COLORS
"FRAME3"
|
"FRAME4"
|
(These two static iframes are borderless and the color of the content pages matches the table so they are invisible. Click links in one iframe, open in second iframe)
|
|
STATIC "FRAME5" - THIS IFRAME HOVERS OVER IMAGE!
The blue center square is on another page, showcased in an iframe that floats over the collage image!
STATIC "FRAME6" - THIS IFRAME HAS WIDE BORDER
GENERAL STATIC IFRAME INSTRUCTIONS:
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. Each iframe needs a unique name.
On this page, I use six names: FRAME1, FRAME2, FRAME3, FRAME4, FRAME5 and FRAME6.
Modify items highlighted in blue in code as necessary to fit your site.Put this code where you want your frame to be.FRAME1: borderless, shown in table above
(Table settings for reference: width: 740, height: 362 width includes room for scrollbar.)
<iframe name="FRAME1" src="id77.htm" width="730" height="360" frameborder="0" ></iframe>
FRAME2: with 3-d border, shown above with no table
<iframe name="FRAME2" src="static2.htm" width="500" height="280" frameborder="1" ></iframe>
Understanding the basic iFrame code:
|
||
<iframe name="FRAMENAME" src="contentpage.htm" width="100" height="280" frameborder="1" scrolling="no" allowautotransparency=true></iframe>
OR this one: if you want to define a heavy colored border as shown in frame6 above:
<iframe name="FRAMENAME" src="contentpage.htm" width="100" height="280" style="border: 10 solid #0415FB" scrolling="no" allowautotransparency=true></iframe>
|
||
Code elements:
|
Used in samples:
|
What is it?
|
iframe name
|
FRAME1
FRAME2
FRAME3
FRAME4
FRAME5
FRAME6
|
Name of the frame (call it anything you want)
No spaces, no symbols except - and _
Multiple iframes: each iFrame needs a different name
|
src
|
id77.htm
static 2.htm
special1.htm
special2.htm
cb.htm
http://www.google.com
frame4blank.htm
frame4spaz.htm
frame4si.htm
frame4oscar.htm
|
Address of the Contents page that you want to see in the iframe (This is the other page seen through the iframe window when you load the page.)
The iframe will begin by displaying this page through the window.
If you want to see a blank box until you click a link, use about:blank as your address.
Better choice: start with a basic page with an introduction, etc
|
width
|
740
40%
|
Wide: Enter number of pixels for the window
Or enter the percentage for the window size
|
height
|
360
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 (higher number = wider border)
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.
|
Transparent iframe codes: (must use both!)
|
see transparent iframe demonstration and tutorial HERE
|
|
allowtransparency true
<style type="text/css">
body {background-color: transparent}
</style>
|
This is the first part of the code. Put into the iframe code
This is the second part of the code. Put at the top of each content page you want to see through. Must use both codes! If this code is not placed on the content page, the iframe will be solid even though you allowed transparency.
|
|
Other iframe settings you can choose to use though I have no samples made with them:
<iframe name="FRAMENAME" src="contentpage.htm" width="100" height="280" frameborder="0" scrolling="no" hspace=10 vspace=5 ></iframe>
|
||
hspace
vspace
|
10
5
|
External Space AROUND the iframe.
Adust the hspace (horizontal-space on right and left) or
vspace (vertical-space above and below the iframe.
|
<body topmargin=10 leftmargin=5>
|
Internal Space WITHIN the iframe. This code is placed into the body of the content page to adjust the margin within the iframe. On FRAME 5 sample, I set the margins to 0.
In CSB, use Insert> HTML to place the code.
|
|
STEP 2: CREATE LINKS TO CHANGE THE CONTENT
NOTES: Scrolling iframes using the code discussed in the table above will not allow linking!
The links demonstrated below are for FRAME1.
Each Link to change the content must have a target defined. The target is the NAME OF THE FRAME where you want the link to open.
On this page, I use five names, but all the sample codes use just one: FRAME1
Chose any one of these ways to make your link:Standard link code:
CSB/TRELLIX: Add target info to URL link properties as shown in this screen print
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!)
Code can also be inserted manually with Insert > HTML (webgem in Trellix)The links across the top of the table (except for "Static") were done this way.
My default placeholder is the webgem symbol. 
Download it here if you would like to use it also.
Download it here if you would like to use it also.SIMPLE TEXT LINK HTML CODE - Relative link:
Scrolling iFrame
<a href="id67.htm" target="FRAME1">Scrolling iFrame</a>
SIMPLE TEXT LINK HTML CODE - Absolute link:
Example 1
<a href="http://www.samisite.com/test-csb2nf/id58.htm" target="FRAME1">Example 1</a>
SIMPLE TEXT LINK HTML CODE - Absolute link with a floating tooltip:
Google
<A href="http://www.google.com" target="FRAME1" title="Google: the best search engine!">Google</A>
Code for specialty links can also be used by adding target="FRAME1"These links (Rollovers, font change, color change, etc) are put in with Insert > HTML (webgem in Trellix)
Group links - See General Instructions
Individual links - The CNN code under FRAME1 uses this rollover code:
CNN
<a href="http://www.cnn.com/" target="FRAME1" onmouseover="this.style.background='#FFFF80'" onmouseout="this.style.background='#BBBBBB'">CNN</a>
HTML Button link code More instructions for this type of link is available here
Button code as seen under the Static iFrame FRAME1:
<STYLE type=text/css>
#rollbutton1 a {
color: #330066;
font-size: 9px;
font-family: verdana;
font-weight:bold;
text-decoration: none;
border:2px outset white;
background-color:#9966CC;
width: 95px;
height: 20px;
padding: 5px 5px;
margin: 3px;
}
#rollbutton1 a:hover {
background-color: #9999FF;
color:#FFFFFF;
padding-left:3px;
border:2px inset light gray;
}
</STYLE>
<DIV id=rollbutton1>
<A href="http://www.google.com" target="FRAME1" title="Google:the best search engine!" onfocus="this.blur()"><center>Google</center></A>
<A href="http://www.langenberg.com/" target="FRAME1" title="Langenberg:the second best search engine" onfocus="this.blur()" target="_top"><center>Langenberg</center></A>
</DIV>
|