Instead of using "in your face" skyscraper or double-wide banners, you can make a standard banner that expands to show more information. In this article, I provide you with easy code to create several different kinds of expanding banners.
Welcome to Bucaro TecHelp!

Bucaro TecHelp
Maintain Your Computer and Use it More Effectively
to Design a Web Site and Make Money on the Web

About Bucaro TecHelp About BTH User Agreement User Agreement Privacy Policy Privacy Site Map Site Map Contact Bucaro TecHelp Contact RSS News Feeds News Feeds

Victims of Sandy Hook

Stop the Slaughter of Innocents. Congress is bought and paid for by gun lunatics and gun promotion groups. If you want to live in a safe America, help buy Congress back for America. Send a donation to Mayors Against Illegal Guns, 909 Third Avenue, 15th Floor New York, NY 10022

Easy Java Script Expanding Banner Code

The most common method for advertising on the Web is banners. But the standard banner may be too small to provide enough information. Instead of using "in your face" skyscraper or double-wide banners, you can make a standard banner that expands to show more information. In this article, I provide you with easy code to create several different kinds of expanding banners.

The code consists of four parts:

1. An html <span> element on your webpage
2. One or two optional graphics images
3. One or two Cascading Style Sheets (CSS) classes
4. One or two Java Script functions

Don't be scared off by the (CSS) classes or Java Script functions, I promise you, this is very easy to do. Lets do the most difficult example first. This first example does not use a graphic image for the banner, it relies entirely on CSS to create the banner.

The banner is defined as a <span> in the <body> section of your webpage, the html is shown below.

<span class="expandable" id="banner">Move mouse pointer over banner</span>

Note that the span has a class attribute and an id attribute defined. The text "Move mouse pointer over banner" is the text that will appear on your banner. Replace this text with your advertising message.

The code for the CSS class "expandable" is shown below. Paste this code in the <head> section of your webpage.

<style type="text/css">
.expandable
{
   position: absolute;
   left: 0;
   top: 0;
   width: 468;
   height: 60;
   border-style: solid;
   border-width: 4;
   border-color: blue;
   margin: 10px;
   padding: 5px;
   background-color: yellow;
   background-image: url("background.gif");
   color: red;
   font-family: Arial;
   font-weight: bold;
   font-size: 20pt;
   font-style: italic;
   z-index:2;
   visibility: visible;
}
</style>

The purpose of this article is give you some quick easy working code, not to bog you down with a long-winded explanation of CSS. So I will point out only a few important facts about the CSS code. The lines left: 0; top: 0; width: 468; and height: 60; define the location and size of the banner. Note that the standard banner size is 468 x 60 pixels.

The code defines a background-color property and a background-image property. Obviously it is not useful to define both of these properties together. Delete the line for the one you don't want to use.

Most of the other "property: value;" pairs defined in the class are self explanatory and you can experiment with them. Except for the color property, which actually applies to the text color.

RSS Feed RSS Feed

Follow Stephen Bucaro Follow @Stephen Bucaro



Web Design Sections

Fire HD
[Site User Agreement] [Privacy Policy] [Site map] [Search This Site] [Contact Form]
Copyright©2001-2016 Bucaro TecHelp 13771 N Fountain Hills Blvd Suite 114-248 Fountain Hills, AZ 85268