X-Team PagePeel, v1.1

Implementation is very simple.

1. Include the Script and Stylesheet references
   <link rel="stylesheet" type="text/css" href="pagepeel.packed.css" />
   <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" type="text/javascript"></script>
   <script type="text/javascript" src="pagepeel-jquery.js"></script>
   
2. Add the required markup to your page.
   <div id="pagepeel" class="xteam-pagepeel">
       <span class="peel">
           <map name="peelmap">
               <area shape="poly" coords="0,0,614,0,614,614,0,0" title="Go!" href="#" class="peel-hotzone" />
           </map>
           <img src="page-peel.png" alt="" class="peel" />
           <span class="back corner"></span>
           <span class="back link">
               <img src="trans.gif" alt="" class="map" usemap="#peelmap" />
               <span class="peel-content">
                   <!-- Your HTML Content Goes here -->
               </span>
           </span>
       </span>
   </div>
   
3. Instantiate the PagePeel component.
   <script type="text/javascript">
       var peel = new Xteam.Ui.PagePeel('#pagepeel');      
   </script>
   
4. Specify options for your PagePeel (optional).
   The following shows the options set to their default values
   <script type="text/javascript">
       var peel = new Xteam.Ui.PagePeel('#pagepeel', {
           teaserInterval: 15, /* The interval (in seconds) at which the "teaser" should show. Set to 0 or false to disable teaser */
           teaserDuration: 5, /* The time (in seconds) the "teaser" should be open */
           fullOpenOnClick: true, /* Whether the Peel opens to the "Full" state when clicked */
           fullOpenIsSticky: true, /* Whether the "Full" state is "sticky" and requires a second click to close */
           fullOpenCloseOnBodyClick: true, /* Whether the "Full", "sticky" state will be closed by a click outside the Peel */
       });     
   </script>