Iframes

What is an iframe? An iframe or inline frame enables your visitor to view a page from your site or from a site anywhere else from the net without having to reload your page. Advantages of iframes Makes changing or updating links or contents of your site very easy. You can put multiple iframes in one page. You can use links from one iframe to change the other. the code for the iframe above is as follows: <iframe src="http://neo-faeriewings.comuv.com/tutorials/frame1.html" name="frame1" width="350" height="100" frameborder=1></iframe> The above frames are what we call interaction frames. Both are pages from different locations and yet when you put them together here you are able to control one frame from another frame! The code for the above frames are as follows: <iframe src="http://neo-faeriewings.comuv.com/tutorials/frame2.html" name="frame2" width="150" height="300" frameborder=1></iframe> <iframe src="http://neo-faeriewings.comuv.com/tutorials/frame3.html" name="frame3" width="150" height="300" frameborder=1></iframe> respectively Now, what are the contents of the first frame and the second frame? On the first frame where we have our link the content is: This is our navigation area!<P> click <a href="http://neo-faeriewings.comuv.com/tutorials/frame4.html" target="frame3"> HERE for frame 4</a><br> click <a href="http://neo-faeriewings.comuv.com/tutorials/frame5.html" target="frame3">HERE for frame 5</a><br> click <a href="http://neo-faeriewings.comuv.com/tutorials/frame3.html" target="frame3">HERE TO GO BACK TO FRAME 3</a><br> If you notice the name of the second frame it is "frame3" thus the target of the link should be on the frame we want it to open! The contents on the second frame is simply the following: This is frame 3. Click on the links on the left frame and see what happens! Setting an iframe is very easy to do! What are the attributes of an iframe width: you can set this in pixel or page percentage height: can also be set in pixel or page percentage frameborder: if you want to place a border around your frames, just enter the number you want depending on how thick you want the border is. If you do not want any border, set the border to 0 How can I make my frames transparent? Sometimes, you want to make your frames seem to be a part of the layout. Having a white background (which most Iframes are) makes your site look not ... not that pleasing. To make your iframe background transparent use this iframe code: <iframe src="frameURL" name="frameNAME" width="frameWIDTH" height="frameHEIGHT" frameborder="frameBORDER" allowTransparency="True"></iframe> and then on the pages you want to put in your frames put this code in the body tag: <body style="background:transparent"> Example: The code for the above frame would be: <iframe src="http://neo-faeriewings.comuv.com/tutorials/frame6.html" name="frame6" width="250" height="150" frameborder=0 allowTransparency="true"></iframe> Don't forget to put the body style code on your files: <body style="background:transparent">. If you fail to do it, your frames will not be transparent!

Share |