Creating transparent, floating layer ads
DiggBlinkRedditDeliciousTechnorati
article by Srirangan
This tutorial is a basic three step guide to have though transparent, floating layer ads on your website. The code mentioned below works on all major browsers today and is standard compliant.
Step 1: Create the hide ad Javascript function
The following piece of code goes in between your <head> tags. It is simple javascript code that changes the display of the layer to 'none'.
<script langauge="javascript">
function hidead()
{
if (document.getElementById)
{
document.getElementById("ad2").style.display = "none";
}
else if (document.all)
{
document.all["ad2"].style.display = "none";
}
else if (document.layers)
{
document.layers["ad2"].style.display = "none";
}
}
</script>
Step 2: Define the style of the layer
This piece of code also goes between your <head> tages. It defines the style, look and appearance of the layer. The colors, transparency and the fonts can be changed to your liking.
<style>
div.topbox
{
border:2px solid #000;
background-color:#777;
padding:1px;
filter:alpha(opacity=85);
opacity: 0.85;
-moz-opacity:0.85;
font-family:verdana;
letter-spacing:0px;
width:40%;
color:#fff;
}
div.topbox h1
{
margin:0px;
padding:10px 0px 0px 10px;
font-size:18px;
font-weight:700;
}
div.topbox p
{
margin:0px;
padding:5px 10px 20px 15px;
font-size:12px;
font-weight:700;
}
div.topbox p a
{
color:#f90;
}
</style>
Step 3: Inserting the ad
This piece of code is a set of Div's that inserts the floating layered ad. It should go in between the <body> tags. You can modify the topand left CSS attributes to change the location of the floating box on the screen. Width too can be modified.
<div id="ad2" style="display:block; position:absolute; top:100px; left:100px;" class="topbox">
<div style="background-color:#000; padding:5px; text-align:center; font-size:12px; font-weight:700;"><a href="#" onclick="javascript:hidead();return false;" style="text-decoration:none; color:#fff;">Hide This Box [X]</a></div>
<br/><br/>
Your message comes here.
<br/><br/>
<div style="background-color:#000; padding:5px; text-align:center; font-size:12px; font-weight:700;"><a href="#" onclick="javascript:hidead2();return false;" style="text-decoration:none; color:#fff;">Hide This Box [X]</a></div>
</div>