Show me the money!
  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', {
            fullOpenOnClick: true,
            fullOpenIsSticky: true,
            fullOpenCloseOnBodyClick: true
        });     
    </script>