Sample 2

Return to main Iframe tutorial

To the right is an image of table layout used on this page for easy reference.

The green boxes show the location of the two iframes on this page.

Each area discussed below has a bulleted number for easy reference.

1. pool applet over logo

2. large iframe (contents change via links)

3. invisible iframe (blended in with page)

4. scrolling marquee function

Roll your mouse over the PIRATES COVE logo to see the Pool Applet. For instructions, please visit this page, Test #2.

To make an iframe transparent (background of the iframe page is visible through the data from the other page), you just need to use 2 additonal code snippets.

1) In the iframe code add ALLOWTRANSPARENCY=TRUE

2) In the content page (the page seen through the iframe), add

<style type="text/css"> body {background-color: transparent} </style>

If you have several pages linked to the same iframe and you want them all to be transparent, you must place the second code on each content page you want to appear in the iframe. You can choose to make only SOME of the pages that appear in the iframe as transparent by not including the 2nd code on all the content pages.

Large iframe (534x152) is across the chest of the skeleton on this page. It allows transparency.

The large iframe window displays another page (largeiframe.htm) when this page loads.

On that page is the second transparency code and two more iframe codes.

TRANSPARENCY CODE to make this page transparent to the iframe it appears in:

<style type="text/css">

body {background-color: transparent}

</style>

IFRAME code for the first slideshow on page largeiframe.htm:

IFRAME code for the second slideshow on page largeiframe.htm:

Each of those iframes displays a flipping slideshow from another page (flipper1.htm and flipper21.htm). Putting two of the same flipping slideshows on the same page causes a code error. By putting the slideshows into iframes, you avoid that problem and don't have to modify the slideshow code in any way. For instructions to make a flipper slideshow, read this tutorial.

Links can change the content of the large transparent iframe by targeting iframe named largeiframe.

1st portrait (party) rollover link and the absolute text link below it use this code:

<a href="http://www.samisite.com/moreiframes/party2.htm" target="largeiframe">PARTY!</a>

This page (party2.htm) has the 2nd transparency code on it so when it appears in the iframe, the original background skeleton is still visible.

3rd portrait (contact us) rollover link and the relative text link below it use this code:

<a href="contact2.htm" target="largeiframe">CONTACT US!</a>

This page (contact2.htm) does NOT have the 2nd transparency code on it so when it appears in the iframe, the original background is blocked by the new content page.

Another smaller iframe is to the right of the large iframe. It is borderless and has a matching black background so it appears invisible to the eye. You see the page black2.htm in that iframe now. Here is the code used for that iframe:

The 6th portrait along the bottom of the page is not a rollover image, but is still a link to change the content of the smaller iframe known as iframe3. When you click that link, the content of the iframe changes to page directions.htm. Link code:

<a href="http://www.samisite.com/moreiframes/directions.htm" target="iframe3">DIRECTIONS</a>

On page black.htm, seen through an iframe is the scrolling text achieved with a simple MARQUEE statement.

Live Music<br><br><br>

Bikini Contests<br><br><br>

Concerts<br><br><br>

Poker Runs<br><br><br>

Party Beach<br><br><br>

Classic Rock<br><br><br>

Reggae<br><br><br>

Calypso<br><br><br>

Beer Sales<br><br><br>

Nightclub<br><br><br>

Cabins<br><br><br>

Camping<br><br><br>

RV Hook-Ups<br><br>

By Water<br><br><br>

...or by land!<p>

</marquee>

Code Notes:

<br> adds a return to space the lines out wider

SCROLLDELAY=300 the lower the number, the faster the scrolling. 100 is too fast!