• Casebook Home
• The Inline Frame
• Controlling Scrollbar Colour

How do I put an inline frame inside a picture?

When used with a little imagination, inline frames can be a great asset to a web page. They can be used to present a lot of information in a small space. Add the ability to control scrollbar colour and you have a great design tool at your fingertips.

Created using the HTML <iframe> tag, the inline frame (also known as the floating frame) creates a customizable scrolling window within a web page. The window can display an image or an entire page of its own, complete with its own images. You simply supply the URL of the image or page to be displayed.

Like most web page objects, inline frames can be placed almost anywhere you want them, so how about inside a picture? Here are a couple of ways to do it:

Use a Table

I think tables are wonderful. I use them all the time for accurately positioning text and images. So this was the first method I thought of. Create a table to display your image across a grid of cells. Specify your image as the background of the table, and arrange the cells so that one of them will be the right size and position for your inline frame.

I've got an image here that is 400 x 300 pixels. I have created a table the same size with a pattern of cells that allows me to place an inline frame right in the middle (only to make the numbers simple!). Make sure that your table's border, cell-padding and cell-spacing properties are all set to zero. Now create an inline frame in your chosen cell. This is a picture (not the real thing) of the table with the inline frame in place. For this picture I set the table's border size to 1 to show the cell pattern. Click this link or the image below to see the real thing:

Tables have a bad habit of resizing themselves, so stick to pixels rather than percentages when specifying cell width and height.  You can then set the width and height properties of the inline frame both to 100%.  This makes the inline frame fill the cell regardless of its dimensions.

Here's the code:

<table border="0" cellpadding="0" cellspacing="0" width="400" height="300" 
   background="poppies.jpg">
<tr>
<td width="133" height="100">&nbsp;</td>
<td width="134" height="100">&nbsp;</td>
<td width="133" height="100">&nbsp;</td>
</tr>
<tr>
<td width="133" height="100">&nbsp;</td>
<td width="134" height="100">
<iframe width=100% height=100% src="lorem.htm" scrolling="auto" noresize 
   frameborder="0" hspace="0" vspace="0" marginheight="0" marginwidth="0">
</iframe>
</td>
<td width="133" height="100">&nbsp;</td>
</tr>
<tr>
<td width="133" height="100">&nbsp;</td>
<td width="134" height="100">&nbsp;</td>
<td width="133" height="100">&nbsp;</td>
</tr>
</table>

Any disadvantages to using tables?

They might be a bit fiddly to set up, although FrontPage has a really simple table-drawing tool, and setting up the table properties is easy too. But you can always jump straight into HTML view and code it yourself. And, of course, Netscape has its own special way of displaying tables, bless it. But then Netscape doesn't support inline frames (or at least it didn't the last time I looked) so it doesn't really mater anyway :-).

Use Absolute Positioning

I'm scared of absolute positioning! I don't know why. It's one of those irrational things that comes from years of building web pages with Notepad. But having overcome my fears, it seems to work really well.

Absolute positioning uses DHTML to specify exactly where on the page a particular object appears. You define the pixel coordinates of the top-left corner of the object and that is where it gets displayed. Some objects, like images and inline frames, have their own size properties but you might have to add <span> tags around your object to let you specify that too. I like to put my absolute position code in span tags anyway.

But just specifying position is not enough. You have to define a stacking order. This is called the z-index and it controls which item is on top if items overlap. An object with a z-index of 1 will be lower down the stack than an object with a z-index of 2. If they happen to overlap, then the one with the higher z-index will be on top.

Here, I'm going to use the same image as before. Internet Explorer has a default page border of 10 pixels left and 15 pixels top, so I'm going to make that the absolute position for my image. I'm also setting the z-index to 1.

I'm going to make the same effect as the previous example, with the inline frame right in the middle of the image. Taking account of the page border, I'm going to position the inline frame at 143 pixels left and 115 pixels top. Because there is no table cell to control the size of the inline frame, I must specify its size in pixels too. The inline frame gets a z-index of 2 to place it on top of the image.

Take a look at the result.

Here's the code:

<span style="position: absolute; left: 10; top: 15; z-index: 1">
<img border="0" src="poppies.jpg" width="400" height="300">
</span>
<span style="position: absolute; left: 143; top: 115; z-index: 2">
<iframe width="134" height="100" src="lorem.htm" scrolling="auto" noresize 
   frameborder="0" hspace="0" vspace="0" marginheight="0" marginwidth="0">
</iframe>
</span>

Any disadvantages to using absolute positioning?

Both Internet Explorer and Netscape support absolute positioning and z-index from version 4 onwards. So, if you thing you have a lot of visitors using Netscape you're likely to get a more predictable result. Using absolute positioning for objects a long way down the page might be tricky, and remember that if you are combining the technique with text content, users choosing their own text-size might not see what you intended.

Related Articles

The Inline Frame
Find out how to create inline frames and what you can do with them:
http://www.fontstuff.com/frontpage/fptut04.htm

Controlling Scrollbar Colour
Spice up your inline frames but giving its scrollbars a custom colour scheme.
http://www.fontstuff.com/frontpage/fptut14.htm