Dynamic Drive DHTML Scripts- DHTML Ad Box

New Revised CSS Library Forums Web Tools

DHTML Ad Box

Description: Matt's DHTML ad script displays an "inexcusable" box in the middle of the page, broadcasting ads of your choice inside. The box automatically disappears after x seconds, with its display frequency configurable (ie: show ad box only 1 of out 5 times the page is loaded). This is one method of serving ads that may just be effective, since it contains qualities of a TV/radio commercial.

Demo: (in demo, ad is set to display for 10 seconds)

Directions:

Step 1: Add the following script to the <HEAD> section of your page:

Select All
<style type="text/css">  </style> <script type="text/javascript"> /****************************************** * DHTML Ad Box (By Matt Gabbert at http://www.nolag.com) * Visit http://www.dynamicdrive.com/ for full script * This notice must stay intact for use ******************************************/ adTime=10; // seconds ad reminder is shown chanceAd=1; // ad will be shown 1 in X times (put 1 for everytime) var ns=(document.layers); var ie=(document.all); var w3=(document.getElementById && !ie); var calunit=ns? "" : "px" adCount=0; function initAd(){ if(!ns && !ie && !w3) return; if(ie) adDiv=eval('document.all.sponsorAdDiv.style'); else if(ns) adDiv=eval('document.layers["sponsorAdDiv"]'); else if(w3) adDiv=eval('document.getElementById("sponsorAdDiv").style'); randAd=Math.ceil(Math.random()*chanceAd); if (ie||w3) adDiv.visibility="visible"; else adDiv.visibility ="show"; if(randAd==1) showAd(); } function showAd(){ if(adCount<adTime*10){adCount+=1; if (ie){documentWidth =truebody().offsetWidth/2+truebody().scrollLeft-20; documentHeight =truebody().offsetHeight/2+truebody().scrollTop-20;} else if (ns){documentWidth=window.innerWidth/2+window.pageXOffset-20; documentHeight=window.innerHeight/2+window.pageYOffset-20;} else if (w3){documentWidth=self.innerWidth/2+window.pageXOffset-20; documentHeight=self.innerHeight/2+window.pageYOffset-20;} adDiv.left=documentWidth-200+calunit;adDiv.top =documentHeight-200+calunit; setTimeout("showAd()",100);}else closeAd(); } function closeAd(){ if (ie||w3) adDiv.display="none"; else adDiv.visibility ="hide"; } function truebody(){ return (document.compatMode && document.compatMode!="BackCompat")? document.documentElement : document.body } onload=initAd; //End--> </script>

Step 2: Insert the below HTML code to the BOTTOM of your page, right above the </BODY> tag itself:

Select All
<div id="sponsorAdDiv" style="visibility:hidden"> <table width="450px" height="350px" bgcolor="#008000"><tr><td> <table width="445px" height="345px" bgcolor="#F0FFF0"><tr><td align="center" valign="middle">  <A HREF="http://www.amazon.com/exec/obidos/redirect-home/wa0c?tag-id=wa0c&placement=home-btn-100x70.gif&site=amazon"> <IMG SRC="http://www.associmg.com/assoc/us/home-btn-100x70.gif?tag-id=wa0c"></A><p><b>Please take time to show your support<br> for this site by visiting one<br> of our sponsors during this<br> brief intermission.</b> </p> <p><A HREF="http://www.amazon.com/exec/obidos/redirect-home/wa0c?tag-id=wa0c&placement=home-logo-130x60b.gif&site=amazon"> <IMG SRC="http://www.associmg.com/assoc/us/home-logo-130x60b.gif?tag-id=wa0c"></A></p> <p>(This announcement will close shortly) <br>  </td></tr></table></td></tr></table> </div>

Configure the ads simply by placing the appropriate HTML/content inside the code of Step 2 where specified.

Please take time to show your support
for this site by visiting one
of our sponsors during this
brief intermission.

(This announcement will close shortly)