Award Sites!  ... "Bettering the Internet Experience!"

Cemetery Woods by David G. Bancroft

AIT Web Hosting and Domains ... Veteran Supported

Home | Articles | Exemplary | Achievement | NovaSite
Resources |
Tutorials | Web Awards | Contact | CureNow
SEARCH | Assembly ||
USA Patriotism! | Poetry Galore

Approved Web Hosting Companies

Gold Stars of Excellence by Award Sites!

HTML Tutorial

I-Frames

My site is composed of I-Frames to display both main content and the CQD news box. It may look complex but it is fairly simple to accomplish. A good working knowledge of tables and table attributes is the key to successful I-Frames. Inline Frames are more commonly called I-Frames and it is basically a table with an I-frame of another separate page targeted to open in that table. 

The main page is one graphic, which I made in PSP. I then sliced the main graphic down into some 40 or so smaller graphics and PSP generated it into html format. I inserted the html into a page and you see the end results. All I had to do was add the links and content. The "box' is the main table of the site. You are not limited to this type of utilization. Any table on your page may contain an I-Frame if targeted correctly.

For the particular table simply insert the following code...

<iframe id="datamain" src="cqdstart.htm"  width=520 height=390 marginwidth=0 marginheight=0 hspace=0 vspace=0 frameborder=0 scrolling=auto name="cqd1"></iframe>

  • Change the height and width to fit whatever you like/need. 

  • Scrolling can be set to Auto/Off or On. Depending on if you want/need a scroll bar in the table

  • src="cqdstart.htm" stands for the main page the I-Frame will load in.

  • pagename="cqd1" stands for the target frame

You have to give the frame a name such as I did. I used CQD1 
There is no code is inserted into the page which you want to load in the particular I-Frame... 

The coding goes into the link from the main page. for example...

<ahref="cqdpriv.htm" target="cqd1"onMouseOver= "VMaxOver(this, 'im1', 'rolloverprivacy.jpg')"><IMG NAME="im1" SRC="Image2_1x2.jpg" border="0" width="44" height="37"></a>

This is the code I used to get it to load in the main table and at the same time apply the rollover effect. Instead of target_blank or target_self etc.. you target it to the particular NAMED I-FRAME TABLE. as is mentioned above.

Below is a list of I-Frame attributes used when setting up and targeting your I-Frames.

AttributeRepresentationDescription

src

url

Points to the initial address of the content to be used in the I-Frame.

name

string

Name of the I-Frame, to use in conjunction with the targeting.

heightNumericThe height of the I-Frame.

width

Numeric

The width of the I-Frame.

frameborder

1

Specifies the width of the border for the I-Frame; 1 is the default.

marginwidth

Numeric value in pixels

Set the size of the top and bottom margin inside the I-Frame.

marginheight

Numeric value in pixels

Set the size of the left and right margin inside the I-Frame.

scrolling

auto

Scrollbars appear as needed.

yes

Scrollbars will always appear.

no

Scrollbars will never appear.

There are two I-frames running on the new site, One is the main content and the other is the news scrollbar. I-Frames are perfect for highlighting quick link information and can be adapted to fit many, many different applications.

The beauty of this design is there is only ONE main page and ONE set of main links, only the content changes via the main page links.

About Contributor
Tom Lyall is the owner and creator of the retired CQD Awards and TLTC Wild Adventure Awards.

He is currently retraining as a Computer Aided Mechanical Design Engineer while providing site design related advice via tutorials and articles.

"Approved" Web Hosting Companies