Floating Ads
With the internet public becoming more and more averse
to in-your-face advertising, you'll probably want to
implement this article with some good taste.
This article shows you how to put an image and/or text
into the top-right corner of your web page. When the
page is scrolled, your image/text stays in the top-right
corner.
The demo page
shows you how it works.
Geocities.com uses a similar idea to float their Yahoo
image or other ad on their member's sites. Pages on sites
whose hosting services preempt that space may not be able
to use the code presented with this article.
The floating ad could be (as examples)
- a small logo,
- a link to a news item,
- a text link to a special area of your site (such as "FAQ" or "Terms of Service"),
- a "Click to Buy" button image linking to an order page,
- an ezine subscription form,
- an affiliate banner, or
- a link that launches a popup window with additional content.
You'll think of other ways to use it.
The part that floats is placed between CSS <span...></span>
tags. Thus, it can contain any HTML code.
Server Side Includes can be used between the
<span...></span> tags, which means you can use Master Site
News, Master Daily Content, or Master Merry-Go-Round to
insert the floating content. (Available from the Master Series. )
This is what you do:
- Retrieve the 27 lines of JavaScript from the demo page and place it in
the <head></head> area of your page.
- Put onLoad="StartFloat()" into the <body... tag.
- Put these lines into the page content (<body></body>) area:
<span align="right" id="AdFloater"
style="position: absolute; visibility: hidden; top: 1px;">
[CONTENT]
</span>
- Replace [CONTENT] in the above lines with whatever you want
to have float on your page.
Question:
Did you find this article interesting and understandable? How can it be improved?
Your response is anonymous.
When done typing, click anywhere outside the box. [more info]
Will Bontrager
©2001 Bontrager Connection, LLC
Please note:
Articles on this website are presented "as is". However -
If you have a question about a CGI script, HTML, CSS, PHP, or JavaScript
Ask one of our Experts and you'll have your answer!
Click here for details.
