Hover Ads Generation

Hover ads and beyond

One of the several kinds of DHTML Popups are Hover ads, and we will take a look here at what hover ads are and what else may be done with "floating layers" or DHTML popups in a web-page, and how they can far exceed the idea of advertising.

Hover ad - definition

The product Advanced DHTML Popup makes the creation of hover ads very easy and fast, while at the same time allowing (from the product design) more complex objects, often involving dynamic changes to content, behavior and appearance.

So what are hover ads? Typically they are DHTML Popups that show a special offer or email sign-up form which drops in or slides in to the page, usually with a deliberate delay of a few seconds. In many cases it contains an on-click link that redirects the visitor to another page. They are simple, fast, automatic and immediately noticeable.

Web-designers generally understand that if hover ads are attractive and well designed, they stand a far better chance of enticing a visitor than irritating them. This product allows easy and fast customization of the appearance of the popup to a degree far superior than is normal.

Hover ad - Example

A perfect example of this can be seen in Jim Cantrell's website Freebits (see first testimonial on the right). This is a slightly delayed slide-in popup containing a graded transparency (png) which, on-click redirects the visitor to another page. It is one of the most attractive, unobtrusive and functional hover ads; created from Advanced DHTML Popup.

Visitor Initiated Hover ads

Now lets look at another example of a DHTML popup that is not of the hover ads type but is instead initiated by the visitor when a button is clicked on. You can see this at Childcare Sales Australia (see second testimonial on the right). Click on either of the buttons on the right of the page (Register as a potential buyer/seller) to bring up a DHTML popup for email sign-up.

In this case, created with the latest version of the product, 2 popups are shown simultaneously if each button is clicked on (with no extra load on the page).

Options available to the hover ad designer

In order for a pleasant and unobtrusive experience from the visitors point of view, hover ads and any application that produces hover ads must be flexible and powerful enough to allow for a full range of customization. The positioning, size, colors, border, title etc must all be easily changed. This is particularly important for ads, but also in the more general case. In addition the range of entry and exit methods of hover ads is important.

With Advanced DHTML Popup almost any aspect of your web page hover ads can be modified, and there is a large range of timed entry and exit methods, ads that scroll, centered and scrolling ads, slide-in or drop-down ads that fade out after time optionally, ads that suddenly fade in after time, and many combinations of these. See here for a list of features. Some common uses for hover ads include:

• Email sign-up ads that appear only after a short time and in an unobtrusive place
• Special offer hover ads to promote your products/services. Easily changed for next month
• Hover Ads providing button links to promote free download pages
• Marketing polls or site suggestions
• Hover ads with holiday wishes and thank you messages after purchase

Hover ads and the dynamic capabilities of the product

When we say dynamic, we are not referring to the automated drop-down, slide-in, fade-in etc functionality, that is often used in hover ads but to the automatic or manual resizing, repositioning and updating of content of the popups. In particular, the content can be constructed dynamically using another application, often involving a database, and then passed either directly into the popup or stored in a file that can be accessed by the popup.

Any number of contents (or content strings) can be prepared in advance and stored in this file. A particular content can be chosen and the hover ad/dhtml popup resized and/or repositioned at the same time. So for example a page may contain a set of links, each of which calls a popup, positioned either relatively to the window or relatively to the cursor, resizes it and changes the content at the same time.

Multiple popups such as this are available in two distinct categories; either sequential or simultaneous. In the first case, there is just one popup created which is then manipulated easily as described above. In the second case many are created (but still only using one library, so with no extra load on the page), and they may all be seen at the same time.

In the home page of this site, there is a hover ad which is triggered to slide-in when the page loads. On the same page there is a link to a "slide-show" demo which uses the same popup as the hover ad, but completely changes the appearance and content. This is an example of sequential popups, and in this case one which is first a hover ad.

Hover ads and control of appearance with cookies

It is important that your visitors are not irritated by hover ads, sometimes this means that they should only see them once. This can be done in a per-session manner or per-time. In the first case the hover ad is only shown once per browser session, meaning that if the page is refreshed, or returned to later in the same session, the hover ad is not seen the second time.

Only if the browser is closed and re-opened will the hover ad reappear. This is called control by session cookie, and is the most common method. A single tick in a box in Advanced DHTML Popup will do this.

In the second case the hover ad may not be shown again for a definite period of time even if the browser is closed and reopened. This is achieved by a persistent cookie, created on the users PC and stored there. It is given a lifetime (usually in days), after which it will expire and the hover ad will be shown again. This is also easily achieved in the product, this time setting the number of days also.

But these two cases are only the simplest methods available to control appearance of hover ads. We will come to one of the most complex shortly, offered by the Advanced DHTML Popup. Before that, there is another method called "Probability control of hover ads". By this we mean that the hover ad will only be shown once every n visits on average, so that if n=3 then the probability of the popup being seen is 33%. In the application you just set this probability and the rest is automatic.

But supposing you want to make sure that the hover ad is seen, but at the same time want to delay its arrival. The visitor may have clicked to another page by then, and will never see it. In fact, if it is cookie controlled the hover ad won't be seen even if the visitor goes back to the page that it's on.

What we want then is to ensure that whatever page is being viewed, there the hover ad will appear. If this is to be achieved while at the same time not showing it on each page then something much more complex is needed. Remember that Javascript and its variables are per-page, not per site, so that one page does not "know" if another page has shown the hover ad.

There is a way however, using cookies as site-wide variables by which the hover ad script on one page can "know" whether the hover ad script on another page has run or not. But this is only the beginning, what we wanted to achieve was much more than that. The hover ad is supposed to appear only after a certain delay independently of the page that the visitor is on. So a countdown clock using site-wide cookies was developed, and this functionality allows a single hover ad to appear on any page after a given time interval whichever page is being viewed.

Article Index