Image book extended

The buttons are optional and not needed for the script to operate.

Supports browsers that fully support W3C DOM like MS IE 5+, Netscape 6+, Mozilla, Opera 7
If your browser cannot handle this script it's time to get a newer one.

Download Example setup

Instructions

1-Create container div with a transparent placeholder image

<div id="Book" style="position:relative">
<img src="placeholder.gif" width="404" height="152">
</div>
width and height of the placeholder must represent total needed space
click and save paceholder >>

2-Insert script in the body of the HTML document

3-Set variables

var Book_Image_Width=200;	Image width
var Book_Image_Height=150;	Image height
var Book_Border=true;	Sets border true or false
var Book_Border_Color="white";	Border color
var Book_Speed=15;	Controls the speed of the page turn
var Book_NextPage_Delay=500;	Controls the delay before a new turn starts
var Book_BackWard=false;	false or true; false is normal page turn
var Book_Auto=true;	false or true; false stops after page turn

4-Fill Book_Image_Sources with the image sources, links and targets you want in the book

Book_Image_Sources=new Array("Image1","Link1","Target1","Image2","Link2","Target2","Image3","Link3","Target3",".....................");
At least 4 images are needed.
For best results keep the number even.
Target can be "top" , "new" or "framename" Quotation marks must be included.
If target is empty ("") the current window or frame is used as target.
If link is not wanted keep it empty ("")

5-Use the available functions for dynamic changes

There are also 6 functions to change the behavior of the book dynamically.
You don't need to use them. If you set Book_Auto to true the script will simply run.
They can be called from other scripts or through HTML elements that support event handling.
For instance an image, anchor or button support onclick: <input type="button" value="MyValue" onclick="Book_ChangeDirection()">
The functions are:

Book_ChangeDirection()	Toggles the page turn direction. If Book_Auto is false it also turns 1 page
Book_GoBackWard()	Changes the page turn direction to backward if needed. If Book_Auto is false it also turns 1 page
Book_GoForWard()	Changes the page turn direction to forward if needed. If Book_Auto is false it also turns 1 page
Book_ChangeAuto()	Toggles between manual and auto
Book_Automated()	Changes the book to auto
Book_Manual()	Changes the book to manual

6-Insert onload statement in your body tag

Select script

/********************************************************
*	Create a div with transparent place holder in your html		*
*	<div id="Book" style="position:relative">			*
*		<img src="placeholder.gif" width="404" height="152">	*
*	</div>							*
*	width = 2*book image width +4 height = book image height+2	*
*								*
*	Insert onload in body tag					*
*		<body onload="ImageBook()">			*
*								*
*								*
*	8 variables you can edit to control behavior 			*
*********************************************************/
	var Book_Image_Width=200;		// Image width
	var Book_Image_Height=150;	// Image height
	var Book_Border=true;		// Sets border true or false
	var Book_Border_Color="white";	// Border color
	var Book_Speed=15;		// Controls the speed of the page turn
	var Book_NextPage_Delay=500;	// Controls the delay before a new turn starts
	var Book_BackWard=false;		// false or true; false is normal page turn
	var Book_Auto=true;		// false or true; false stops after page turn

/*********************************************************************************************************
*	There are also 6 functions to change the behavior of the book dynamically.							*
*	You don't need to use them. If you set Book_Auto to true the script will simply run.						*
*	They can be called from other scripts or through HTML elements that support event handling.					*
*	For instance an image, anchor or button support onclick: <input type="button" value="MyValue" onclick="Book_ChangeDirection()">	*
*	The functions are:													*
*		Book_ChangeDirection()	Toggles the page turn direction. If Book_Auto is false it also turns 1 page			*
*		Book_GoBackWard()	Changes the page turn direction to backward if needed. If Book_Auto is false it also turns 1 page	*
*		Book_GoForWard()		Changes the page turn direction to forward if needed. If Book_Auto is false it also turns 1 page	*
*		Book_ChangeAuto()	Toggles between manual and auto							*
*		Book_Automated()		Changes the book to auto								*
*		Book_Manual()		Changes the book to manual								*
*															*
*															*
*	Array to specify images and optional links and targets. At least 4 images are needed. 						*
*	For best results keep the number even.										*
*	Target can be "top" , "new" or "framename" Quotation marks must be included.						*
*	If target is empty ("") the current window or frame is used as target.							*
*	If link is not wanted keep it ""											*
**********************************************************************************************************/
	Book_Image_Sources=new Array(
		"Image1","Link1","",
		"Image2","Link2","",
		"Image3","Link3","",
		"Image4","Link4","",
		"Image5","Link5","",
		"Image6","Link6","",
		"Image7","Link7","",
		"Image8","Link8",""	// NOTE No comma after last line
		);

/********************************** DO NOT EDIT BELOW *******************************************************/

var B_LI,B_MI,B_RI,B_TI;
	var B_Angle=0,B_CrMImg,B_CrSImg,B_MaxW,B_Drctn=true,B_DirChngd=false;
	var B_Srcs=Book_Image_Sources,B_SrcL=B_Srcs.length,B_ChngDirFlg=false;
	var B_MSz,B_Stppd=Book_Auto?false:true;B_Pre_Img=new Array(B_SrcL);