SiteExperts.com Logo Home | Community | Developer's Paradise | Jobs
User Groups | Site Tools | Site Information | Search

Inside Technique : Dynamic HTML Ads : Building an Ad

The easiest way to build a Dynamic HTML advertisement is to first author and test it as a standard HTML page. We construct our ads by creating a DIV on the page that represents the size of the banner: 

<DIV ID=ad STYLE="position: relative; cursor: hand; width: 468; height: 60; border: 1pt black solid">
  Ad contents go here
</DIV>

The DIV is specified as being relatively positioned to ensure that it accurately represents the coordinate system for any contained elements. All elements contained within the DIV are positioned relative to the DIV's upper-left hand corner.

The next step is to define the advertisement and any necessary behavior code. Below is the complete source for our Inside Techniques advertisement: 

  <HTML>
    <HEAD>
      <TITLE>Inside Techniques Ad</TITLE>
      <STYLE>
        #ad {background: black; cursor: hand}
        SPAN {color: RGB(0%,70%, 100%); font-size: 18pt; display: none}
      </STYLE>
      <SCRIPT>
        var s = document.all.tags("SPAN")
        var c = 0

        function clearOut() {
          for (var i=0; i 0)
          s[c-1].style.color ="RGB(40%,40%, 40%)"
         c++
         if (c < s.length) 
           setTimeout("showAll()",500) 
        else 
           setTimeout("clearOut()",5000) 
        } 

        window.onload="showAll;" 
</SCRIPT> 
</HEAD> 
<BODY ONCLICK="ad1.click()" > 
  <DIV ID="ad" STYLE="position: relative; width: 468; height: 60; border: 1pt black solid" > 
  <A ID="ad1" STYLE="display: none" HREF="/adClick.asp?adID=00001" ></A> 
  <SPAN STYLE="position: absolute; top: 5; left: 105" ID="style" > 
    Data Binding 
  </SPAN> 
  <SPAN STYLE="position: absolute; top: 3; left: 230" ID="style" > 
    Dynamic Content 
  </SPAN> 
  <SPAN STYLE="position: absolute; top: 15; left: 200" ID="style" > 
    Dynamic Style 
  </SPAN> 
  <SPAN STYLE="position: absolute; top: 29; left: 90" ID="style" > 
    Elements 
  </SPAN> 
  <SPAN STYLE="position: absolute; top: 20; left: 220" ID="style" > 
    HTML Techniques 
  </SPAN> <SPAN STYLE="position: absolute; top: 17; left: 73" ID="style" > 
    Intrinsic Controls 
  </SPAN> 
  <SPAN STYLE="position: absolute; top: 30; left: 215" ID="style" > 
    JavaScript Functions 
  </SPAN> 
  <SPAN STYLE="position: absolute; top: 10; left: 115" ID="style" > 
    Articles 
  </SPAN> 
  <SPAN STYLE="position: absolute; top: 0; left: 0; width: 100%; text-align: center; font-size: 12pt; color: gold; font-weight: bold" ID="style" > 
    Inside Dynamic HTML<BR><B STYLE="font-size: 24pt" >Inside Techniques</B> 
  </SPAN> 
  </DIV> 
</BODY> 
</HTML>

The invisible anchor inside the ad represents where to navigate if the user clicks inside the ad. Notice that in the onclick handler of the BODY element, the click() method on the anchor is called. This specifies the URL to follow no matter where the user clicks. You can easily customize the final location based on what and where the user clicks in the page.

Also, in this example the position of all the text is statically defined. Since this ad is written with script, the ad can easily randomly order and position the elements. Animated GIF advertisement normally have limits on the number of frames and are designed to repeat themselves to conserve space. With script, much more animation and behavior can be defined with a small amount of code.

Next we show you how to convert your script to a Dynamic HTML Ad.

© 1997-2000 InsideDHTML.com, LLC. All rights reserved.