here is what I have it works in Fire Fox and chrome not in IE7.
<code>
window.addEvent('domready', function() {
/* things in here happen as soon the document is ready */
// set constants
var $pageheight = 189; // the single page height we're using
var $pagewidth = 146; // the single page width we're using
var $pageYpos = 0; // the current Y position of our background-image
(in both pages)
var $turnheight = 0; // The height of the page turning image.
var $turnwidth = 0; // The width of the page turning image.
var $bgposition = 0;
var leftpage = $('leftpage');
var rightpage = $('rightpage');
var flip = $('flip');
var lfx = leftpage.effects({duration: 10, transition:
Fx.Transitions.Quart.easeOut});
var rfx = rightpage.effects({duration: 10, transition:
Fx.Transitions.Quart.easeOut});
var flipfx = flip.effects({duration: 50, transition:
Fx.Transitions.Quart.easeOut});
//Start Leftpage
$('leftpage').addEvent('mousedown', function() {
$pageYpos = $pageYpos + $pageheight;
$bgposition = '0px '+$pageYpos+'px';
lfx.start({'background-position': $bgposition});
flipfx.start({'background-position': '0 0'});
});
$('leftpage').addEvent('click', function() {
$bgposition = '146px '+$pageYpos+'px';
flipfx.start({'background-position': '236px 0px'});
rfx.start({'background-position': $bgposition});
});
//End Leftpage
//Start Rightpage
$('rightpage').addEvent('mousedown', function() {
$pageYpos = $pageYpos + $pageheight;
$bgposition = '146px '+$pageYpos+'px';
rfx.start({'background-position': $bgposition});
flipfx.start({'background-position': '118px 0px'});
});
$('rightpage').addEvent('click', function() {
$bgposition = '0px '+$pageYpos+'px';
flipfx.start({'background-position': '236px 0px'});
lfx.start({'background-position': $bgposition});
});
//End Rightpage
});
</code>