Search
Dandy
Dingtjes
   References
lyrics
Links
Fotos
Memos
Vroeger
Games
Amiga
Shoppi
Bel Media
Dingetjes|Klachten|Macro vision sucks|linux home theatre system|utp|Mengpaneel|iframes|default image viewer|multiple remote users on win x|xorg video settings|ATI Radeon IGP 345M|Almere|Frontpage|Thunderbird images|test formulier

Transparent Iframes Tutorial

Getting Started

Hi! This is Sania of Anime Skies here to tell you how to make transparent iframes. It's really simple, actually, and as long as you follow each step, you won't have any problems.

The Codes

First, you need to open up a layout image that you've already made. I assume that you've already made the blog spots on the layout where the iframes will go.

Open up a text editor like Notepad that you will be using. Enter these codes into it.
<HTML><HEAD><title>TITLE HERE</title><link rel="stylesheet" type="text/css" href="style.css"><body scroll="no"><IMG SRC="bg.jpg" WIDTH=486 HEIGHT=550 BORDER=0 ALT="><body bgcolor="#ffffff"><div style="position: absolute; top: 290; left: 190; width: 300; height: 352; text-align: justify;"><IFRAME SRC="main.html" WIDTH=214; HEIGHT=876 FRAMESPACING=0; NAME=main; FRAMEBORDER=0; SCROLLING=AUTO ALLOWTRANSPARENCY=TRUE STYLE="filter: chroma(COLOR=#ffffff);"></IFRAME></div></body><script language="JavaScript"><!--window.open = SymRealWinOpen;//--></script></html>

 

Save it as "index.html". Make sure you save it into the same folder as your image that you're using for the layout.

STYLE="filter: chroma(COLOR=#ffffff) This is the section that you may need to edit. The "chroma" is the area. The color after it is the color that will be made transparent. In this instance, #FFFFFF is white, so all the white parts of the iframe will be transparent. Get what I'm saying?

The Main Section

Open up another new document. This one will be saved as "main.html". Copy and paste these codes into that new document. I wouldn't recommend changing anything unless you know what you're doing.

<HTML><HEAD><title>TITLE HERE</title><link rel="stylesheet" type="text/css" href="style.css"><body bgcolor="#ffffff"><script language="JavaScript"><!--window.open = SymRealWinOpen;//--></script>

Style

For the last time, open up a new document. This one will be saved as "style.css". Don't put ".html" at the end or else it won't work.
<!--BODY {color:#000000;font-size:8pt;font-family: arial; line-height: 15px;cursor:n-resize;background-color: #ffffff;background-repeat: no-repeat;background-attachment: fixed;}--><!--BODY{scrollbar-face-color: #ffffff;scrollbar-highlight-color: #ffffff;scrollbar-3dlight-color: #000000;scrollbar-darkshadow-color: #ffffff;scrollbar-shadow-color: #000000;scrollbar-arrow-color: #000000;scrollbar-track-color: #ffffff;}<!--A:link { color:#0066ff; text-decoration:none;cursor:n-resize}A:visited { color:#0066ff; text-decoration:none;cursor:n-resize}A:active { color:#0066ff; text-decoration:none;cursor:n-resize}A:HOVER{color:#000000;border-bottom:1 solid; border-color:#000000; font-weight:bold;cursor:e-resize}</STYLE>-->.header{text-decoration: none;font-weight:bold;font-size:8pt; text-align: center;color: #000000;border: 1px solid #000000;}input, textarea{ border:1px solid #000000; background: #ffffff; font-size: 8pt; font-family: arial; color: #000000;}

 

Now See Your Final Product!

Open up "index.html". Hopefully your iframes is transparent! If anything went wrong or you don't understand it, feel free to contact me.

Dandy Teg 2004
Hosted by Bits Don't Byte