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.

Next: Tracking the number of click-thrus >>
 

More HTML Articles
More By Tim Pabst

Comments On: Make Your Own Cool Drop Down Ad's

>>> Be the FIRST to comment on this article!