Opacity can be done using iframes similar to the divs we looked at on the previous page. Unfortunatly, this effect will not work in Opera browsers as they do not support this type of coding.
An iframe is a small section that is showing a different webpage inside of it. So the first step is to create the main page that will hold the iframe coding.
The part that says allowtransparency="true" permits the iframe to be transparent. Before we even start, this has already created a problem. Validation. If you don't care about code validation, you can scipt the next part. We have to use a bit of javascript around the iframe tag to "hide" it from the validator.
The scrolling="yes" property is a very important factor. IE has a small bug in it that creates horizontal bars when they are not required. Having this property present will fix that bug.
Ok, now the first page is done and validates, it is time to prepare the second page (and any other pages that will appear inside of the iframe area).
There are three main parts to look at in the above coding. The class trans_div, the class trans_div[class], and that weird part that looks like a commented IE style sortof thing.
The first part ...
The second part ...
The third part ...
IE is a bit buggy, so the style inside of this area is trying to fix up the bugs a bit for our effect. This is to set the page height to 100%. If this is not done, IE will cut off our transparent effect at the end of the text instead of going the full page height.
After all of that, here is the result of our example...
An iframe is a small section that is showing a different webpage inside of it. So the first step is to create the main page that will hold the iframe coding.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title> my test page </title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<style type="text/css">
body {background: #ffffff url(smilie.gif);}
</style>
</head>
<body>
<iframe src="secondpage.html" style="width:450px;height:200px;" allowtransparency="true" scrolling="yes"></iframe>
</body>
</html>
<html>
<head>
<title> my test page </title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<style type="text/css">
body {background: #ffffff url(smilie.gif);}
</style>
</head>
<body>
<iframe src="secondpage.html" style="width:450px;height:200px;" allowtransparency="true" scrolling="yes"></iframe>
</body>
</html>
The part that says allowtransparency="true" permits the iframe to be transparent. Before we even start, this has already created a problem. Validation. If you don't care about code validation, you can scipt the next part. We have to use a bit of javascript around the iframe tag to "hide" it from the validator.
The scrolling="yes" property is a very important factor. IE has a small bug in it that creates horizontal bars when they are not required. Having this property present will fix that bug.
<script type="text/javascript">
<!--
document.write ('<iframe src="secondpage.html" style="width:450px;height:200px;" allowtransparency="true" scrolling="yes"></iframe>');
//-->
</script>
<!--
document.write ('<iframe src="secondpage.html" style="width:450px;height:200px;" allowtransparency="true" scrolling="yes"></iframe>');
//-->
</script>
Ok, now the first page is done and validates, it is time to prepare the second page (and any other pages that will appear inside of the iframe area).
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title> my second test page </title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<style type="text/css">
.trans_div {
font-weight:bold;
margin:0px;
/* This is an IE filter command. Other browsers will ignore it */
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=true, sizingMethod=scale src='50percent.png');
}
/* Square bracketed class styles are usable non-IE type browsers */
.trans_div[class] {
background-image:url(50percent.png);
}
</style>
<!--[if IE]>
<style type="text/css">
body {height:100%;}
</style>
<![endif]-->
</head>
<body class="trans_div">
This is a test.<br />
This is a test.<br />
This is a test.<br />
This is a test.
</body>
</html>
<html>
<head>
<title> my second test page </title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<style type="text/css">
.trans_div {
font-weight:bold;
margin:0px;
/* This is an IE filter command. Other browsers will ignore it */
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=true, sizingMethod=scale src='50percent.png');
}
/* Square bracketed class styles are usable non-IE type browsers */
.trans_div[class] {
background-image:url(50percent.png);
}
</style>
<!--[if IE]>
<style type="text/css">
body {height:100%;}
</style>
<![endif]-->
</head>
<body class="trans_div">
This is a test.<br />
This is a test.<br />
This is a test.<br />
This is a test.
</body>
</html>
There are three main parts to look at in the above coding. The class trans_div, the class trans_div[class], and that weird part that looks like a commented IE style sortof thing.
The first part ...
.trans_div {
font-weight:bold;
margin:0px;
/* This is an IE filter command. Other browsers will ignore it */
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=true, sizingMethod=scale src='50percent.png');
}
... is a normal class that is being applied to the BODY tag. The font weight is set to bold for example purposes so it can be seen better. The margin is set to zero for the effect to reach the full edges of the window area. The last part is a special IE code to stretch our background image to the full window area.
font-weight:bold;
margin:0px;
/* This is an IE filter command. Other browsers will ignore it */
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=true, sizingMethod=scale src='50percent.png');
}
The second part ...
/* Square bracketed class styles are usable non-IE type browsers */
.trans_div[class] {
background-image:url(50percent.png);
}
... is to set the background in non-IE browsers.
.trans_div[class] {
background-image:url(50percent.png);
}
The third part ...
<!--[if IE]>
<style type="text/css">
body {height:100%;}
</style>
<![endif]-->
... is called a "conditional" section. In theory (because I really don't know how well supported this is or not) if an IE browser is viewing the page, it will render the coding inside of this area. Non-IE browsers should ignore it as a normal comment area.
<style type="text/css">
body {height:100%;}
</style>
<![endif]-->
IE is a bit buggy, so the style inside of this area is trying to fix up the bugs a bit for our effect. This is to set the page height to 100%. If this is not done, IE will cut off our transparent effect at the end of the text instead of going the full page height.
After all of that, here is the result of our example...
