Home arrow HTML arrow Page 5 - Make Your Own Cool Drop Down Ad's
HTML

Make Your Own Cool Drop Down Ad's


"The age of the banner ad is dead" shouts a self-proclaimed online marketer. "Banner ads represent a bad return on investment" writes another. The truth of the matter is that banner ad's aren't dead, my friend. In this article Tim shows us how to create a banner management application that lets us add nifty MySQL-blobbed, two part drop-down banners to our sites. If you run your own site then you can't afford not to read this tutorial!

Author Info:
By: Tim Pabst
Rating: 4 stars4 stars4 stars4 stars4 stars / 26
May 20, 2002
TABLE OF CONTENTS:
  1. · Make Your Own Cool Drop Down Ad's
  2. · How drop down ads work
  3. · The admin.php script
  4. · The admin.php script (contd.)
  5. · Viewing, expanding and collapsing a banner
  6. · Tracking the number of click-thrus
  7. · Conclusion

print this article
SEARCH DEVARTICLES

Make Your Own Cool Drop Down Ad's - Viewing, expanding and collapsing a banner
(Page 5 of 7 )

Believe it or not, admin.php contains all of the complex functionality. Viewing, expanding and collapsing the banners is easy. By using some nifty JavaScript functions, we can give the appearance that the banner is changing size.

View.php contains one function called viewBanner and nothing else. ViewBanner accepts one parameter, which is the ID of the banner to display:

function viewBanner($BannerId)

ViewBanner grabs the banner from the banners table, making sure it exists with a call to mysql_fetch_array:

$result = @mysql_query("select width, link1, link2 from banners where bannerId = $BannerId");

if($row = mysql_fetch_array($result))
{
// Increment the numImps field for this banner
@mysql_query("update banners set numImps = numImps + 1 where bannerId = $BannerId");


If it exists, a table containing two images is output:

<form name="banner<?php echo $BannerId; ?>">
<table border="0" cellspacing="0" cellpadding="0">
<tr>
<td>
<div align="right">
<font face="verdana" size="1" color="#000000">
[ <a href="javascript:expand<?php echo $BannerId; ?>()">Expand</a> ]<br><br>
</font>
</div>
</td>
</tr>
<tr>
<td valign="top">

<a target="_blank" href="track.php?bannerId=<?php echo $BannerId; ?>&img=top"><img name="top<?php echo $BannerId; ?>" src="getbanner.php?bannerId=<?php echo $BannerId; ?>&img=top" width="<?php echo $row["width"]; ?>" border="0"></a><br>

<a target="_blank" href="track.php?bannerId=<?php echo $BannerId; ?>&img=bottom"><img name="bottom<?php echo $BannerId; ?>" src="getbanner.php?bannerId=<?php echo $BannerId; ?>&img=bottom" width="<?php echo $row["width"]; ?>" border="0"></a>

</td>
</tr>
</table>
</form>


There are three main things to point out here. First off, we have the link that expands and collapses the banner:

[ <a href="javascript:expand<?php echo $BannerId; ?>()">Expand</a> ]

It calls a JavaScript function named expand[bannerId]. For example, if we are viewing a banner with ID of 10, then expand10() would be called. We will look at the JavaScript code shortly.

Next, we have the two images:

<a target="_blank" href="track.php?bannerId=<?php echo $BannerId; ?>&img=top"><img name="top<?php echo $BannerId; ?>" src="getbanner.php?bannerId=<?php echo $BannerId; ?>&img=top" width="<?php echo $row["width"]; ?>" border="0"></a><br>

<a target="_blank" href="track.php?bannerId=<?php echo $BannerId; ?>&img=bottom"><img name="bottom<?php echo $BannerId; ?>" src="getbanner.php?bannerId=<?php echo $BannerId; ?>&img=bottom" width="<?php echo $row["width"]; ?>" border="0"></a>


Each image links to track.php, which increments the click-thru rate for this banner and then redirects the user to the link setup for that banner in admin.php. The two image tags represent the top and bottom images for each banner. To "expand" the banner, we change the width of the bottom banner to make it look like the top banner has stretched.

The top banner is called top[bannerId] and the bottom is called bottom[bannerId]. We give the banners unique names so that we can display more than one banner per page if need be:

top<?php echo $BannerId; ?>
bottom<?php echo $BannerId; ?>


Lastly, look at the src attribute for each of the banners. It points to getbanner.php, passing in two parameters: bannerId and img. Getbanner.php queries our MySQL database and streams the binary data for each image to the browser. The img variable tells the script whether to get the top or bottom image for the banner.

So, at this point, we know how the banners are displayed on the page with the expand link that points to a JavaScript function. What we don't know however, is the JavaScript code that ties everything together. Let's look at that now.

The JavaScript code
The JavaScript to give the impression of an expanding and collapsing banner is under 20 lines long, and looks like this:

<script language="JavaScript">
<!--

// Get the original width of the bottom image and
// set a timeout to collapse it
var timeToShow = 3600;
var origWidth = <?php echo $row["width"]; ?>;

window.setTimeout('document.bottom<?php echo $BannerId; ?>.width = 0', timeToShow);

function expand<?php echo $BannerId;?>()
{
if(document.bottom<?php echo $BannerId; ?>.width == 0)
{
// Expand the image
document.bottom<?php echo $BannerId; ?>.width = origWidth;
}
else
{
// Collapse the image
document.bottom<?php echo $BannerId; ?>.width = 0;
}
}

// -->
</script>


The JavaScript starts by setting two variables: timeToShow (which is the number of milliseconds that the expanded banner should show for when the page loads) and origWidth (which is the original width of the banners, as pulled from the database).

// Get the original width of the bottom image and
// set a timeout to collapse it
var timeToShow = 3600;
var origWidth = <?php echo $row["width"]; ?>;


See how I've used PHP code with JavaScript? When the script runs, the PHP parser simply converts

var origWidth = <?php echo $row["width"]; ?>;

to something like

var origWidth = 468;

While still using a combo of PHP and JavaScript, we call the setTimeout function, which takes two parameters: a JavaScript command to execute, and the number of milliseconds before it should be executed:

window.setTimeout('document.bottom<?php echo $BannerId; ?>.width = 0', timeToShow);

So in our code, we want to change the width of the bottom banner image to 0 after timeToShow (3600) milliseconds.

Next we have the expand[bannerId] function. Remember that [bannerId] represents the ID of the banner which the code is being generated for, so ...

function expand<?php echo $BannerId;?>()

may turn out to be ...

function expand33()

If we're viewing the banner whose bannerId field is 33. The expand function toggles the width of the bottom banner image. If the width is zero, then it changes it to origWidth. If it's origWidth, then it changes it to zero:

if(document.bottom<?php echo $BannerId; ?>.width == 0)
{
// Expand the image
document.bottom<?php echo $BannerId; ?>.width = origWidth;
}
else
{
// Collapse the image
document.bottom<?php echo $BannerId; ?>.width = 0;
}


One last thing to remember is the JavaScript link that we saw earlier:

[ <a href="javascript:expand<?php echo $BannerId; ?>()">Expand</a> ]

When the text "Expand" is clicked, the JavaScript expand function will be called, toggling the width of the bottom banner image. That's all there is to view.php. When the page is loaded, the two variables will be set and the window.setTimeout function will be executed. If you wanted to, you could also move this code into its own function and call it through <body onLoad="someFunc()">.

To test the viewBanner function in view.php I have created a file called test.php, which looks like this:

<?php require_once("view.php"); ?>
<?php viewBanner(1); ?>


When I run test.php in my browser, both the top and bottom parts of the banner are visible, and after 3.6 seconds, the bottom image collapses, leaving only the top image. When I click on the "expand" link however, the bottom image reappears.

Both the top and bottom images link to track.php (which increments that banners click-thru rate), so let's take a look at that now.
blog comments powered by Disqus
HTML ARTICLES

- Does HTML5 Need a Main Element?
- Revisiting the HTML5 vs. Native Debate
- HTML5: Not for Phone Apps?
- HTML5 or Native?
- Job Hunting? Freelancer.com Lists This Quart...
- HTML5 in the News
- Report: HTML5 Mobile Performance Lags
- The Top HTML5 Audio Players
- Top HTML5 Video Tutorials
- HTML5: Reasons to Learn and Use It
- More of the Top Tutorials for HTML5 Forms
- MobileAppWizard Releases HTML5 App Builder
- HTML5 Boilerplate: Working with jQuery and M...
- HTML5 Boilerplate Introduction
- New API Platform for HTML5

Watch our Tech Videos 
Dev Articles Forums 
 RSS  Articles
 RSS  Forums
 RSS  All Feeds
Write For Us 
Weekly Newsletter
 
Developer Updates  
Free Website Content 
Contact Us 
Site Map 
Privacy Policy 
Support 

Developer Shed Affiliates

 




© 2003-2017 by Developer Shed. All rights reserved. DS Cluster - Follow our Sitemap
Popular Web Development Topics
All Web Development Tutorials