Expandable Banners Tutorial

Introduction
Source Code
All Examples
Image Banners
Flash Banners
HTML Banners
Takeover Banners
Corner Peel Banners
Text
Responsive HTML

A) Introduction - top

Expandable Banners allows you to create professional rich media expandbale banners in any size an using any media such as Flash, HTML, HTML5 or Images. You design 2 banners, one in the original state and one in the expanded state. Simply add your banners with the addition of our codes and watch your expandable banner deploy. Customize it by adding a close button or by turning animation on/off and more. Grab your client code and lets get started.

B) Source Code - top

expandablebanners.js

By purchasing you own the rights to use the source code on as many websites that you run or administer.
Not for resale or distrubution.

C) All Examples - top

Example 1: Images - animated no close button (All Directions)
Example 2: Images - animated no close button - click to open (All Directions)
Example 3: Images - animated with close button (All Directions)
Example 4: Images - animated with close button click to open, Close button on the Outside (All Directions)
Example 5: Images - instant-open with close (All Directions)
Example 6: Images - instant-open no close (All Directions)
Example 7: Images - Auto-open after 2 seconds
Example 8: Flash - w/backup images
Example 9: HTML - Animated with a close button
Example 10: HTML - Animated with no close button
Example 11: HTML - Instant-open with no close button
Example 12: Takeover Images Animated
Example 13: Takeover Flash
Example 14: Takeover HTML
Example 15: Corner Page Peel
Example 16: Corner Page Peel with Close button
Example 17: Text
Example 18: Text click to open - with Close button
Example 19: Responsive HTML

* Please make sure that these examples files are working from your website before continuing.

D) Image Banners - top

Basic Image Banners Template.

<html>
<head>
<script type="text/javascript" src="expandablebanners.js"></script>
<script type="text/javascript">
  var squaretopleft = ExpandableBanners.banner("squaretopleft", "images/square_expanded.jpg");
  squaretopleft.setCloseImage("images/closebutton.jpg", 'left', 'top');
  squaretopleft.animated = true;
  squaretopleft.setDirection('up', 'left'); 
  squaretopleft.expandOnClick = false;

if (document.addEventListener) {
document.addEventListener("DOMContentLoaded",function(){documentReady=true;});}
else if (!window.onload) window.onload = function(){documentReady=true;}


</script>
</head>

<body> 

<a id="squaretopleft" href="www.yourwebsite.com"><img src="images/square.jpg" /></a></body>
</html>

You can view an example of the an image to image banner Example 1: Images - animated no close button (All Directions)

1. Name the variable to anything you'd like such as: squaretopleft
2. Replace your images: /images/square.jpg & /images/square_expanded.jpg with your smaller & larger images.
3. Set the direction you want the banner to expand to squaretopleft.setDirection('up', 'left');

Here's a list of the 9 different direction options you can use:

setDirection('up','left');
setDirection('up','right');
setDirection('up','center');
setDirection('down','left');
setDirection('down','right');
setDirection('down','center');
setDirection('center','left');
setDirection('center','right');
setDirection('center','center');

5. If you'd like to open your banner when you click instead of a Rollover use: squaretopleft.expandOnClick = true;
6. If you'd like no animation use: squaretopleft.animated = false;
7. If you'd like to remove a close button and have it close with a Rolloff. Simply remove the variable: squaretopleft.setCloseImage("images/closebutton.jpg", 'left', 'top');
8. To make the banner Auto-load Add the below JavaScript.

1000 = 1 second.

E) Flash Banners - top

Basic Flash template.

<html>
<head><script type="text/javascript" src="expandablebanners.js"></script>

<script type="text/javascript">
  var squaretopleft = ExpandableBanners.banner("squaretopleft", "flash/300X300.swf", 300, 300);
  squaretopleft.setCloseImage("images/blank.gif", 'left', 'top');
  squaretopleft.animated = false;
  squaretopleft.setDirection('up', 'right'); 
  squaretopleft.expandOnClick = true;

if (document.addEventListener) {
document.addEventListener("DOMContentLoaded",function(){documentReady=true;});}
else if (!window.onload) window.onload = function(){documentReady=true;}


</script>
    
<script type="text/javascript" src="swfobject/swfobject.js"></script>
<script type="text/javascript">
        swfobject.embedSWF("flash/125X125.swf", "large_exp", "125", "125", "9.0.0", "swfobject/expressInstall.swf");
</script>

</head>

<body> 
<div id="squaretopleft" style="width:125px;height:125px;">
       <div id="large_exp"><img src="images/square.jpg">
       </div>
        </div></body>
</html>

You can view the Flash Banner Example here

1. Replace the larger expandable banner
var squaretopleft = ExpandableBanners.banner("squaretopleft", "flash/300X300.swf", 300, 300); with your own flash file and dimensions.
2. Set the direction you want the banner to expand to squaretopleft.setDirection('up', 'left');
3. Set the first original banner:

The Actionscript 2.0 code to open is.

on (release) {
     getURL("javascript:ExpandableBanners.openAd('squaretopleft');");
}

The Actionscript 2.0 code you put on your close button is.

on (release) {
     getURL("javascript:ExpandableBanners.closeAd('squaretopleft');");
}

*When using Flash make sure you set a blank close button. squaretopleft.setCloseImage("images/blank.gif", 'left', 'top');
This blank.gif is a 1 pixel by 1 pixel transparent GIF file.
You need to add this because you don't the banner close when you Rolloff the larger banner.

Also make sure that you turn the animation off. You will probably want to do the animation manually inside the Flash file.

F) HTML Banners - top

Basic HTML Banner template.

<html>
<head><script type="text/javascript" src="expandablebanners.js"></script>
<script type="text/javascript">
  var exampleHTMLToPage = ExpandableBanners.banner("exampleHTMLToPage", "html/expanded.html", 728, 500);
  exampleHTMLToPage.setCloseImage("images/closebutton.jpg", 'right', 'bottom');
  exampleHTMLToPage.animated = true;
  exampleHTMLToPage.setDirection('down', 'right');
  exampleHTMLToPage.closeOutside = false;

if (document.addEventListener) {
document.addEventListener("DOMContentLoaded",function(){documentReady=true;});}
else if (!window.onload) window.onload = function(){documentReady=true;}


</script>
</head>

<body> 

<div id="exampleHTMLToPage" style="width:728px; height:90px; background-color:rgb(30,167,221); 
position:relative; color:white; font-weight:bold">
<div style="display:inline-block; width:420px; font-size:28px; margin-top:20px">This is an HTML banner</div><br>
<div style="display:inline-block; width:300px; font-size:18px;">You can have an HTML content here.</div>
</div>
</body>
</html>

You can view an example of the an HTML to HTML banner here. Example 9: HTML - Animated with a close button

1. Set up your banner exactly the same way as an Image banner expect for the larger banner.

var exampleHTMLToPage = ExpandableBanners.banner("exampleHTMLToPage", "html/expanded.html", 728, 500);

With HTML Banners you can set an additional close property which is makes the close button appear outside of the HTML file.

exampleHTMLToPage.closeOutside = true;
exampleHTMLToPage.closeOutside = false;

G) Takeover Banners - top

Here is the basic Takeover banner template.

<html>
<head><script type="text/javascript" src="expandablebanners.js"></script>
  var squarecentercenter = ExpandableBanners.banner("squarecentercenter", "images/takeover.jpg");
  squarecentercenter.setCloseImage("images/closebutton.jpg", 'right', 'top');
  squarecentercenter.animated = true;
  squarecentercenter.setDirection('center', 'center'); 
  squarecentercenter.expandOnClick = false;

if (document.addEventListener) {
document.addEventListener("DOMContentLoaded",function(){documentReady=true;});}
else if (!window.onload) window.onload = function(){documentReady=true;}

</script>

<script type="text/javascript">
  function autoExpand() {
  setTimeout("ExpandableBanners.openAd('squarecentercenter')",1000);
  }
  if (document.addEventListener) {
  document.addEventListener("DOMContentLoaded",autoExpand);
  }
  else if (!window.onload) window.onload = autoExpand;
</script>


</head>

<body> 

<a id="squarecentercenter" href="www.yourwebsite.com"><img src="images/blank.gif" border="0"></a></body>
</html>

Make sure to set a blank image that is only 1 pixel by 1 pixel as your first banner.

H) Corner Page Peels - top

Here is the basic Corner Page Peel Banner template.

<html>
<head>
<script type="text/javascript" src="expandablebanners.js"></script>
<script type="text/javascript">

  var squaretopleft = ExpandableBanners.banner("squaretopleft", "images/cornerpeel-big.png");
  squaretopleft.animated = true;
  squaretopleft.setDirection('down', 'left'); 
  squaretopleft.expandOnClick = false;

if (document.addEventListener) {
document.addEventListener("DOMContentLoaded",function(){documentReady=true;});}
else if (!window.onload) window.onload = function(){documentReady=true;}

</script>

<style type="text/css">
#cornerpagepeel {
position:absolute;
top:0px;
right:0px;}
</style>

</head>

<body> 

<div id="cornerpagepeel"><a id="squaretopleft" href="www.yourwebsite.com"><img src="images/cornerpeel.gif" />
</a></div></body>
</html>

1. The only difference with the corner page peel banner is that you must add an extra DIV layer and add this CSS to place the DIV to the top right corner of the page.

</style>

I) Text - top

Here is the basic Text Banner template.

<html>
<head>
<script type="text/javascript" src="expandablebanners.js"></script>
<script type="text/javascript">

  var squaretopleft = ExpandableBanners.banner("squaretopleft", "images/square_expanded.jpg");
  squaretopleft.setCloseImage("images/closebutton.jpg", 'right', 'top');
  squaretopleft.animated = true;
  squaretopleft.setDirection('up', 'right'); 
  squaretopleft.expandOnClick = false;

if (document.addEventListener) {
document.addEventListener("DOMContentLoaded",function(){documentReady=true;});}
else if (!window.onload) window.onload = function(){documentReady=true;}

</script>

</head>

<body> 

<a id="squaretopleft" href="www.yourwebsite.com">Rollover this text. </a></body>
</html>

A text banner is exactly the same as an image banner except that first banner is just text.

J) Responsive HTML Banners - top

Here is the Responsive Expandable Banner template. Is it basicallt the same as just a regular HTML banner but this time we have 3 HTML Banners.
The Blue is the JavaScript, the Red is the CSS and Green is the DIV layers.

<html>
<head>
<script type="text/javascript" src="expandablebanners.js"></script>
<script type="text/javascript">


      var exampleHTMLToPage = ExpandableBanners.banner("exampleHTMLToPage", "html/rexpanded.html", 728, 500);
    exampleHTMLToPage.setCloseImage("images/closebutton.jpg", 'right', 'bottom');
    exampleHTMLToPage.animated = true;
    exampleHTMLToPage.setDirection('down', 'right'); 
    
  
      var exampleHTMLToPage2 = ExpandableBanners.banner("exampleHTMLToPage2", "html/rexpanded2.html", 500, 400;
    exampleHTMLToPage2.setCloseImage("images/closebutton.jpg", 'right', 'bottom');
    exampleHTMLToPage2.animated = true;
    exampleHTMLToPage2.setDirection('down', 'right'); 
    
    
      var exampleHTMLToPage3 = ExpandableBanners.banner("exampleHTMLToPage3", "html/rexpanded3.html", 320, 320;
    exampleHTMLToPage3.setCloseImage("images/closebutton.jpg", 'right', 'bottom');
    exampleHTMLToPage3.animated = true;
    exampleHTMLToPage3.setDirection('down', 'right'); 
    
    
    if (document.addEventListener) {
document.addEventListener("DOMContentLoaded",function(){documentReady=true;});}
else if (!window.onload) window.onload = function(){documentReady=true;}


</script>

<style type="text/css">

#exampleHTMLToPage{
width:728px;
height:90px;
background-image:url(images/responsive_728x90.jpg);}

@media (max-width: 700px) 

{#exampleHTMLToPage2 {
width:500px;
height:90px;
background-image:url(images/responsive_500x90.jpg);}}

@media (max-width: 500px)

{#exampleHTMLToPage3 {
width:320px;
height:90px;
background-image:url(images/responsive_320x90.jpg);}}

@media screen and (min-width: 700px) and (max-width: 3000px) {
  #exampleHTMLToPage { display: block; }  /* show it on large screens */}

@media screen and (min-width: 0px) and (max-width: 699px) {
  #exampleHTMLToPage { display: none; }   /* hide */}

@media screen and (min-width: 500px) and (max-width: 699px) {
  #exampleHTMLToPage2 { display: block; }  /* show it on small screens */}

@media screen and (min-width: 700px) and (max-width: 4000px) {
  #exampleHTMLToPage2 { display: none; }   /* hide */}

@media screen and (min-width: 0px) and (max-width: 500px) {
  #exampleHTMLToPage2 { display: none; }   /* hide */}

@media screen and (min-width: 0px) and (max-width: 499px) {
  #exampleHTMLToPage3 { display: block; }  /* show it on iphone screens */}

@media screen and (min-width: 500px) and (max-width: 4000px) {
  #exampleHTMLToPage3 { display: none; }   /* hide  */}

</style>

</head>

<body> 

<div id="exampleHTMLToPage"></div>
<div id="exampleHTMLToPage2"></div>
<div id="exampleHTMLToPage3"></div>

</body>
</html>

The CSS media queries are used the hide the other 2 banners when the screen-size is not being displayed. Be sure to name your banners differently. exampleHTMLToPage, exampleHTMLToPage2, exampleHTMLToPage3

Media queries can be touchy.
Make sure to set the Display to None, (display:none;) for each screen size,
*Except for the one you want the banner to show on, which you would then set to (display:block;)

The larger expanded banners are being loaded from
html/rexpanded.html
html/rexpanded2.html
html/rexpanded3.html

Inside each of these HTML files make sure to have no margins in the HTML document and wrap your banner is a <div id="banner_ad" > </div>
This is the HTML from the 3rd banner.

<html>
<head>

<style type="text/css">
body {
  margin-left: 0px;
  margin-top: 0px;
  margin-right: 0px;
  margin-bottom: 0px;
}
</style>

<body>

<a href="tutorial.html" target="_blank">
<div id="banner_ad" style="background-image:url(../images/responsive_320x320.jpg);width:320px; height:320px">
</div>
</a>

</body>

</html>

Your link goes around the DIV

2015 � OnlineCreative.org