Back to Tutorial
 

Example 9:
HTML to HTML Banners


This is an HTML banner

You can have an HTML content here.




This the code you'd use for the HTML Banner

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

<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>

*The Larger HTML banner is an HTML file that gets loaded.


All Examples

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 (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