Back to Tutorial
 

Example 16:
Corner Page Peel Banners


This the code you'd use for the top-left banner

<script type="text/javascript">
// Square Top Left
var squaretopleft = ExpandableBanners.banner("squaretopleft", "images/cornerpeel-big.png");
squaretopleft.setCloseImage("images/closebutton.gif", 'left', 'bottom');
squaretopleft.animated = true;
squaretopleft.setDirection('down', 'left');
squaretopleft.expandOnClick = false;
</script>

<style type="text/css">
#cornerpagepeel
{
/*set the div in the top right corner*/
position:absolute;
top:0px;
right:0px;
}
</style>

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

</body>

 


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