HTML – Transparent iframe
Version: 43.1
Revision: 13.2 Build 13
HTML – Transparent iframe
Introduction: this article was written to assist users who support “iframes” for their website.
But, this time, I will show you how to create frames that are transparent…
1.] Download notepad++ from the original author or from a mirror and install the software.
——————————-
http://sourceforge.net/projects/notepad-plus/
http://filehippo.com/download_notepad/
——————————-
2.] Add this iframe into your webpage or modify your existing “iframe”.
—Copy Source Code—
<iframe width="70%" height="500px" name="example" src="example.html" frameborder=0 ALLOWTRANSPARENCY="true" /></iframe>
—End Source Code—
Copyright 2001-2009 Lair360
Notes: change your frame’s width and height to suit your websites’ layout.
But, don’t forget to change the default – page (example.html) and replace it with your own.
3.] Now create a “CSS StyleSheet” and link it to your webpage.
—Copy Source Code—
iframe {
background-color: transparent;
}
—End Source Code—
Copyright 2001-2009 Lair360
Notes: if you want to add your “CSS + Javascript files” as an external file, you’ll need to use these codes instead.
a.] Copy these codes and insert it into the “head” tags. But, don’t forget to replace “name.js” and “style.css” with your own external – files.
—Copy Source Code—
<script type="text/javascript" language="Javascript" SRC="name.js"></script> <link rel="stylesheet" type="text/css" href="styles.css">
—End Source Code—
Copyright 2001-2009 Lair360
b.] Save your work and continue…
4.] Now, check your “iframe” tags, then add a “class” attribute.
After that, please save your progress…
—Copy Source Code—
<iframe class="attribute01" width="70%" height="500px" name="example" src="example.html" frameborder=0 ALLOWTRANSPARENCY="true" /></iframe>
—End Source Code—
Copyright 2001-2009 Lair360
Notes: you’ll need to replace class: “attribute01″ with your own tags.
5.] When you’re done with your “iframe”, you’ll need to modify your “CSS files”.
—Copy Source Code—
iframe.attribute01 {
background-color: transparent;
}
—End Source Code—
Copyright 2001-2009 Lair360
6.] Save your progress and exit…
7.] Done!
Tips: if you want to add these codes in a single file, you’ll need to use this method.
—Copy Source Code—
<head>
<style type="text/css">
<!--
iframe.attribute01 {
background-color: transparent;
}
-->
</style>
</head>
<body>
<iframe class="attribute01" width="500px" height="99px" name="about" src="blank.htm" frameborder=0 ALLOWTRANSPARENCY="true" /></iframe>
</body>
—End Source Code—
Copyright 2001-2009 Lair360
