'Page Turner' Test

The Markup

The JavaScript

<script type="text/javascript" src="jquery.js"></script>

<script type="text/javascript">

// set constants
var $pageheight = 189; // our single page height
var $pagewidth = 146; // our single page width

var $leftpageXpos = 0; // X position of our bg-image in #leftpage
var $rightpageXpos = 189; // X position of our bg-image graphic in #rightpage
var $pageYpos = 0; // current Y position of our bg-image (in both pages)

$(document).ready(function(){ // When the page is ready
/* left page turner */

$("div#leftpage").click( function() {
$pageYpos
= $pageYpos + $pageheight; // update Y postion
$("#leftpage") .css("background-position", "0px "+$pageYpos+"px");// move the background position
}); // close leftpage click function
}); // close doc ready

</script>