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.
<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.
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"
The next thing to consider is that we may want to display the same ad on more than one page.
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):
// 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 and use as many as you need
mess = 'HTML for your first ad goes here';
mess = '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.
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.