Overlay Messages

No one bothers looking at the ads actually in the page any more and with so many programs removing pop up windows before the ad even appears, pop up advertising is not the best solution either. Dare to be a bit different and use similar DHTML code to the extended tooltips to display an ad temporarily in the top corner of your page just like the one advertising 'Ask Felgall' that appeared when you first accessed this page. Of course this script isn't limited to just displaying ads, you can use it to display any sort of message that you want to appear temporarily in a highlighted box at the top of your page, so let's call it a message rather than an ad.

Like the tooltips, this script works in Internet Explorer 4 and later, Netscape 4 and later, and Opera 6. The script doesn't work in Opera 5. We don't have the same positioning problem with Opera 6 as we had for the tooltips since we are not trying to use the cursor position to set the location for the display. I now have two versions of the script for you to choose from as the one that supports modern browsers but not IE4 or Netscape 4 is only half the size of the old version that also supports those two browsers.

Oh, and since we aren't removing the message when the mouse is moved, we can place links in the display that your visitor can click on. My ads have three, two within the ad - the image takes you to my home page and a text link that takes you to the page I'm advertising, and one at the bottom that allows the visitor to close the ad if they don't want to wait for it to disappear by itself.

That's right, this script will cause the message to disappear all by itself after an amount of time specified by you. I have the delay set to five seconds for the example ad but you can use whatever value you want. I suggest that you don't want to make the delay too long as the message is hiding a part of your page so somewhere between five and ten seconds is probably about right. I am sure that my ad will have disappeared by now, if you want to see again what an overlay message looks like and how it will disappear all by itself , click on your browser refresh button (or click here to make an ad appear or disappear - it will stay on the screen for ten seconds this time).

So now that you've seen what the script does, the next thing to do is to create the script and link it into your page. Oh, and if you're wondering how I get the code to display different ads, keep reading because tell you how to do that as well, but first let's deal with how to display a fixed message at the top of the page.

Firstly, here are the files that are needed to perform the functions I describe on this page. You are welcome to use this script on any non-commercial web site that you may have. All I ask is that you don't remove the copyright notice from the top of the scripts, don't alter the code within the scripts (except for incorporating your advertisements into the random ad script), and that if you use the overlay message script supplied here to display messages (not ads) on your web pages that you please acknowledge where you got it from by placing a link to this site on the pages where you use it. If you use this script to display ads on your web pages I ask that you include an overlay ad for my site as one of the ads you are using the script to display. The necessary code to incorporate my ad into one of your pages can also be found in the download file. If you have a commercial website you may still use the script (subject to the same conditions) in return for a donation toward the cost of my maintaining this site.

The overlay message script doesn't work by itself. For the script to work you also need to use a cascading stylesheet to define the appearance of the message. You can change the content of the stylesheet entry if you want to change the appearance of your overlay messages but don't touch the position or visibility parameters.

To incorporate the Javascript overlay message into your page you first need to attach the script and stylesheet into your page. You can do this by inserting the following code at the end of the <head> section of your page source:

 <script type="text/javascript" src="adv.js"></script>
<link rel="stylesheet" href="adv.css" type="text/css" />

Note that although a couple of the functions are common between this script and the tooltip script, I have used different names for everything in this script so that you can incorporate both scripts into the same page if you want without them interfering with one another.

By incorporating the above code, we have made the Javascript overlay message facility available to use on our page. To actually create the message we next need to define its content.

We do this by coding the message within <div> tags immediately after the <body> tag within the page that will use it. For example one of my ads could be defined using the following code:

 <div id="a1" class="adv"><table border="0" width="100%"> <tr><td class="centre"><a href="http://www.felgall.com/"><img src="felgall.gif" width="65" height="55" border="0" alt="Felgall Pty Ltd" /></a></td></tr></table><p class="centre">Do You have a question about Computers?</p><p class="centre"><b>We can help. </b></p><p class="centre"><a href="http://www.felgall.com/">Ask Felgall</a><br />for free computer help</p><hr /><p class="centre"><a href="#" onclick="showAd('a1',0,0)">Close</a></p> </div>

Using class="adv" with the entry defines the content of the <div> tag as being an overlay message because it associates it with the adv class that we defined in the cascading stylesheet. The stylesheet defines the message as using absolute positioning so that its location on the page will not be affected by its location within the code. We define an unique id for the message so that we can reference it to both display it on our page and eventually to make it disappear. In fact the code that I have presented you with shows you just how to add the code to make a close link within the message. You can use whatever id that you want for your overlay message as long as it is not used for any other field on your page.

Actually the onclick code that I show above will both make the message disappear if it is visible or will make the message appear if it is hidden. As the close link is within the message itself, it's a bit hard to click on it to make the message appear. To make the message appear in the first place we actually place that code into the <body> tag itself as an onload parameter. Like this:

 <body background="img/sidebar1.gif" bgcolor="#ffffff"

This seems like a good place to tell you what the second and third parameters do. The javascript has code within the showAd function that will make the message disappear after the number of seconds specified in the second parameter if your visitor hasn't already clicked the close button. The third parameter allows you to select one of two positions to display your message - when this is set to zero the message will display in the top right corner of the page and when it is set to one the message will be centred at the top of the page. Of course these parameters only get used when the call will result in the message being displayed so for the close link within the script we can specify zero for both values.


The next thing to consider is that we may want to display the same ad on more than one page.

We can solve this problem with Javascript as well. Instead of including the code for the ad into the page itself we can place the code within document.write(); statements in an external Javascript. We can then link this Javascript into each of the pages where we want the ad to display by placing the script call within the <div> tags like this:

 <div id="a1" class="adv"> <script type="text/javascript" src="advdisp.js"></script> </div>

I will not go into too much detail as to how to code this Javascript because I have a further suggestion to make on what we can do now that we have the ad code in a Javascript. We can set the Javascript up to contain several different ads and have it randomly select which one to display when the page is first loaded.

I have created a script that does this for you and have included it in the download file that I referenced at the top of this page. The script is called advdisp.js so you can include the script link into all of your pages exactly as shown above. In order to be friendly to your visitors who are desperate to see what is under your ad I have also included the horizontal line with the close link under it within the script to save you from having to code this yourself.

Unlike the earlier script that goes in the head section of your page, this body script will need to be edited before you can use it. Let's take a look at what you will find at the top of this script (this time I'll show the part that needs editing in bold):

 // Random Overlay Advert Javascript
// copyright 11th August 2002, by Stephen Chapman, Felgall Pty Ltd
var mess = new Array();
var adID = 'a1'; // put the ID from the div tag here to use with the close link
// place your advertisements here
// - start with mess[1] and use as many as you need
mess[1] = 'HTML for your first ad goes here';
mess[2] = 'HTML for your second ad goes here';

The adID field needs to be set to the same ID as you used in the <div> tag so if you decided to identify your overlay ad with an id other than a1 you'll need to change this line.

The array needs to be set up to contain the html code to display each of your ads with one ad per array entry. You can set up as many different ads as you need as the script will check how many you have before randomly selecting one of them. You can place the html code that you would have placed between the div tags between the quotes on one of these lines. Because this is contained within a Javascript array entry rather than hard coded in your page, you will need to insert a \ in front of every / (slash), \ (backslash), and ' (apostrophe) contained within the code to ensure that they are interpreted correctly and that the script will work.

If you do use this script to randomly display an ad on each of your pages, you will not need to include my ad in the array because it is already incorporated into the script itself but you will still need to load my image to your server.

Well there you have it. A more user friendly way of placing advertising on your page that can also be used to display welcome (and other) messages on your page when it is first displayed.


This article written by Stephen Chapman, Felgall Pty Ltd.

go to top

FaceBook Follow
Twitter Follow