Inline Frames

Inline frames are more complicated than regular frames. They are easier for image layouts however, and are popular to use. This tutorial will hopefully help you understand iframes.

There are two different ways to use inline frames. The first way is to just have an image and make an iframe next to it. The second way to use iframes is to make the frame part of the image. This is the more complicated way to do it. Usually it looks great when you do it this way. But in order to make your inline frames line up exactly on top of the image, you have to use div positioning.

This tutorial attempts to teach you both ways.

The first way is easy. All you really need is to choose the SIZE of your iframe. Just change where it says ### to whatever the WIDTH and LENGHT are.

<iframe FRAMEBORDER="0" BORDER=0 width=###px height=###px src="INLINE FRAME NAME.html" name="NAME OF THE TARGET"></iframe>

Just add that code next to the image or below it and it will make an inline frame. Then you have to target it and make an .html file it links to just like in regular frames. (For example if name=content then you would target all your image map or other main page links like this a href="link.html" target="contet" get it?)

Here's the more complicated way.

First, you choose an image large enough to be the entire layout. You will proably create an image map or something for navigation etc etc.

You add this code before you add the image codes. This is the positioning code for the main image.

<div style="position:absolute;left:0px;top:0px;">

This code positions your image at the left top most corner of the screen. It's just easier if you don't want to make it a pop up or make a non pop up option, for people to have it at the corner.

For the iframe code, this time it's more complicated. The code is similar to the above one for iframes, but also contains the div positioning. First you crop out the part of the big image that you want to be in the iframe to be the background. Later you will just use that as a background for the inline frame and make sure its fixed so it doesn't scroll. You can fade this background part if necessary.

<iframe FRAMEBORDER="0" BORDER=0 width=###px height=###px src="INLINE FRAME NAME.html" name="NAME OF TARGET" style="position:absolute; left:###px; top:###px" scrolling=auto></iframe>

Basically how I find the left:###; top:### information is I hover over that left most top most part of the image with my mouse in psp7. In the lower left corner it tells me coordinates. Then I plug them in and see how it works and maybe move it down or sideways a little to position it until its perfectly lined up. That way, no matter what resolution sees it, it will always line up and look fine.

Basically, this is the order to remember:

1. first positioning code
2. image code whether through image map or not
3. iframe code and position

<-back