PDA

View Full Version : need help with flip book positioning



otter2
10-05-2006, 09:46 AM
1) Flipbook

2) http://www.dynamicdrive.com/dynamicindex14/bookflip.htm


3) I finally got the flip book to work and it defaulted to the left I believe which is fine for me, but how do I move it up or down or is that possible? Is there something wrong with my code or is there something I should be doing in the position section? Here is that code for that frame.

<html>

<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<meta name="GENERATOR" content="Microsoft FrontPage 4.0">
<meta name="ProgId" content="FrontPage.Editor.Document">
<title>Horne</title>
<base target="contents">
</head>

<body onload="ImageBook()" leftmargin="0" topmargin="0" bgcolor="#99ccff">

<div style="position: absolute; top: 0; left: 725; width: 32; height: 38">

<p>&nbsp;</p>
</div>
<h2 align="center" style="margin-bottom: 0"><b>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
Horne, Halsell, Holsey&nbsp;</b></h2>
<h2 align="center" style="margin-top: 0"><b><font size="5">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
Family Reunion Web Site</font></b></h2>
<p align="center" style="margin-top: 0"><span style="position: absolute; left: 176; top: 59"><img src="final divider.gif" border="0" width="545" height="51"></span></p>
<p align="center" style="margin-top: 0">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<!--webbot
bot="HTMLMarkup" startspan --><script type="text/javascript">

/***********************************************
* Book Flip slideshow script- Ger Versluis 2003
* Permission granted to DynamicDrive.com to feature script
* This notice must stay intact for use
* Visit http://www.dynamicdrive.com/ for full source code
***********************************************/

/********************************************************
Create a div with transparent place holder in your html
<div id="Book" style="position: relative">
<img src="placeholder.gif" width="144" height="227">
</div>
width = 2*book image width +4 height = book image height+2

Insert onload in body tag
<body onload="ImageBook()">
*********************************************************/

// 7 variables to control behavior
var Book_Image_Width=90;
var Book_Image_Height=87;
var Book_Border=true;
var Book_Border_Color="gray";
var Book_Speed=15;
var Book_NextPage_Delay=1500; //1 second=1000
var Book_Vertical_Turn=0;

// array to specify images and optional links. At least 4
// If Link is not needed keep it ""

Book_Image_Sources=new Array(
"mickey.bmp","http://www.dynamicdrive.com",
"snowwhite.jpg","http://www.javascriptkit.com",
"castle-127.gif","", //this slide isn't linked
"treeoflife.jpg","http://www.dynamicdrive.com",
"villian-200.jpg","http://www.dynamicdrive.com",
"epcot.jpg","http://www.dynamicdrive.com",
"fireworks.jpg","http://www.dynamicdrive.com",
"group_logo_237x148.jpg","http://www.dynamicdrive.com",
"girls_200x400.jpg","http://www.dynamicdrive.com",
"waltdisneyandmickey.jpg","http://www.codingforums.com" // NOTE No comma after last line
);

djr33
10-05-2006, 11:04 AM
Wow. No. Don't use &nbsp; like that. (Or don't just press the spacebar to position if you're using a preview-based webpage editor.)
Use center align or a div with CSS positioning.
Second, the ENTIRE script must be in your document.

Third, the script is in the head section of your page:
<html>
<head>
HERE
</head>
<body>
text, etc.
</body>
</html>
The line:
<body onload="ImageBook()" leftmargin="0" topmargin="0" bgcolor="#99ccff">
will make the imagebook appear... no need to put the script in the main part of the text.
The div with id="Book" is where the whole thing will appear.
So...
Just follow the directions on the page and cut/paste:
<div id="Book" style="position:relative">
<img src="placeholder.gif" width="144" height="227">
</div>where you want it.

Your inputted values for the images are wrong. Or, rather, the links. You left it as "http://www.dynamicdrive.com", etc. The links on the images should be to YOUR site or the site of your choosing, related to each picture. If you DON'T want that, then just leave it blank, like it says-- "" (meaning blank, since the quotes are empty.)


<!--webbot bot="HTMLMarkup" startspan -->
Huh? Delete that line. Unless you know what it does and want that... 'cause I have no clue.

otter2
10-05-2006, 11:47 AM
But still I don't know how to move the book up or down. I know how to center,right,or left align it.

otter2
10-05-2006, 11:53 AM
oops! Now that I've made the changes you suggested, I get it. Thanks alot for the help!