Where the PARTY is on Lake Texoma
Camping    Cabins    RV Hook-Ups    Free Overnight Yacht Moorage   

(this link changes the large iframe)
(this link changes the large iframe)
(this link changes the hidden iframe)

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.    

<iframe name="largeiframe" src="largeiframe.htm" width="534" height="152" frameborder="0" scrolling="no" ALLOWTRANSPARENCY=TRUE></iframe>

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}

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

<iframe name="flipper1" src="flipper1.htm" width="168" height="143" frameborder="0" scrolling="no"></iframe>

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

<iframe name="flipper2" src="flipper2.htm" width="168" height="143" frameborder="0" scrolling="no"></iframe>

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:

<iframe name="iframe3" src="black2.htm " width="168" height="180" frameborder="0" scrolling="no"></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.

<marquee direction="up" height="100" SCROLLDELAY=300 >
Live Music<br><br><br>
Bikini Contests<br><br><br>
Poker Runs<br><br><br>
Party Beach<br><br><br>
Classic Rock<br><br><br>
Beer Sales<br><br><br>
RV Hook-Ups<br><br>
By Water<br><br><br>
...or by land!<p>

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!

  tutorial and sample made by Samantha Conway  - Samisite.com    

FRED's website for Lake Pirates Forums - thanks for the use of the images in the tutorial!

VISIT SAMPLE 1 - uses 2 small iframes, one over each hand