Book flip image query

**mikep** · 06-20-2005, 06:47 PM

Dear all

I am wondering if it is possible to have a "tool-tip" style text balloon appearing over the book flip graphic when in motion, much like the ALT tag when coding a normal image. I want to tell visitors to move their mouse away from the book flip image to allow it to animate.

Is there a way to do this?

Thanks for any help offered.
Mike

**jscheuer1** · 06-20-2005, 07:14 PM

For future reference:

Warning: Please include a link to the DD script in question in your post. See this thread for the proper posting format for asking a question.

There has to be a display area for any script like this. Usually it is either written by the script (using document.write or document.writeln) or included as an html component of the script. In either case it will be a tag of some sort, usually an image tag. Give this tag a title attribute. In this case the tag in question is an image tag inside of a division found just after the end of the script:

HTML Code:

	<div id="Book" style="position:relative">
		<img src="placeholder.gif" width="144" height="227">
	</div>

Change it to something like this:

HTML Code:

<div id="Book" style="position:relative">
<img src="placeholder.gif" width="144" height="227" title="{PAUSED} - to restart, move mouse away from images">
</div>

Untested, if there is a problem, use the title attribute for the containing division.

**mikep** · 06-20-2005, 07:37 PM

Ref: http://www.dynamicdrive.com/dynamicindex14/bookflip.htm

Hi John

Thanks for your reply.
I tried this but it still doesn't work, have I placed the code in the wrong position? Here is the snippet of code for reference:

/***********************************************
* 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" title="{Paused: please move mouse pointer away from graphic to continue">
</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=220;
var Book_Image_Height=312;
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(
"../images/backpage.jpg","",
"../images/front.jpg","",
"../images/p2.jpg","",
"../images/p3.jpg","",
"../images/p4.jpg","",
"../images/p5.jpg","",
"../images/p6.jpg","",
"../images/p7.jpg","",
"../images/p8.jpg","",
"../images/p9.jpg","",
"../images/p10.jpg","",
"../images/p11.jpg","",
"../images/p12.jpg","",
"../images/p13.jpg","",
"../images/p14.jpg","",
"../images/p15.jpg","",
"../images/p16.jpg","",
"../images/p17.jpg","",
"../images/p18.jpg","",
"../images/p19.jpg",""
);

/***************** DO NOT EDIT BELOW **********************************/
var B_LI,B_MI,B_RI,B_TI,B_Angle=0,B_CrImg=6,B_MaxW,B_Direction=1;
var B_MSz,B_Stppd=false;B_Pre_Img=new Array(Book_Image_Sources.length);

function ImageBook(){
if(document.getElementById){
for(i=0;i<Book_Image_Sources.length;i+=2){
B_Pre_Img[i]=new Image();B_Pre_Img[i].src=Book_Image_Sources[i]}
Book_Div=document.getElementById("Book");
B_LI=document.createElement("img");Book_Div.appendChild(B_LI);
B_RI=document.createElement("img");Book_Div.appendChild(B_RI);
B_MI=document.createElement("img");Book_Div.appendChild(B_MI);
B_LI.style.position=B_MI.style.position=B_RI.style.position="absolute";
B_LI.style.zIndex=B_RI.style.zIndex=0;B_MI.style.zIndex=1;
B_LI.style.top=(Book_Vertical_Turn?Book_Image_Height+1:0)+"px";
B_LI.style.left=0+"px";
B_MI.style.top=0+"px";
B_MI.style.left=(Book_Vertical_Turn?0:Book_Image_Width+1)+"px";
B_RI.style.top=0+"px";
B_RI.style.left=(Book_Vertical_Turn?0:Book_Image_Width+1)+"px";
B_LI.style.height=Book_Image_Height+"px";
B_MI.style.height=Book_Image_Height+"px";
B_RI.style.height=Book_Image_Height+"px";
B_LI.style.width=Book_Image_Width+"px";
B_MI.style.width=Book_Image_Width+"px";
B_RI.style.width=Book_Image_Width+"px";
if(Book_Border){
B_LI.style.borderStyle=B_MI.style.borderStyle=B_RI.style.borderStyle="solid";
B_LI.style.borderWidth=1+"px";
B_MI.style.borderWidth=1+"px";
B_RI.style.borderWidth=1+"px";
B_LI.style.borderColor=B_MI.style.borderColor=B_RI.style.borderColor=Book_Border_Color}
B_LI.src=B_Pre_Img[0].src;
B_LI.lnk=Book_Image_Sources[1];
B_MI.src=B_Pre_Img[2].src;
B_MI.lnk=Book_Image_Sources[3];
B_RI.src=B_Pre_Img[4].src;
B_RI.lnk=Book_Image_Sources[5];
B_LI.onclick=B_MI.onclick=B_RI.onclick=B_LdLnk;
B_LI.onmouseover=B_MI.onmouseover=B_RI.onmouseover=B_Stp;
B_LI.onmouseout=B_MI.onmouseout=B_RI.onmouseout=B_Rstrt;
BookImages()}}

function BookImages(){
if(!B_Stppd){
if(Book_Vertical_Turn){
B_MSz=Math.abs(Math.round(Math.cos(B_Angle)*Book_Image_Height));
MidOffset=!B_Direction?Book_Image_Height+1:Book_Image_Height-B_MSz;
B_MI.style.top=MidOffset+"px";
B_MI.style.height=B_MSz+"px"}
else{ B_MSz=Math.abs(Math.round(Math.cos(B_Angle)*Book_Image_Width));
MidOffset=B_Direction?Book_Image_Width+1:Book_Image_Width-B_MSz;
B_MI.style.left=MidOffset+"px";
B_MI.style.width=B_MSz+"px"}
B_Angle+=Book_Speed/720*Math.PI;
if(B_Angle>=Math.PI/2&&B_Direction){
B_Direction=0;
if(B_CrImg==Book_Image_Sources.length)B_CrImg=0;
B_MI.src=B_Pre_Img[B_CrImg].src;
B_MI.lnk=Book_Image_Sources[B_CrImg+1];
B_CrImg+=2}
if(B_Angle>=Math.PI){
B_Direction=1;
B_TI=B_LI;
B_LI=B_MI;
B_MI=B_TI;
if(Book_Vertical_Turn)B_MI.style.top=0+"px";
else B_MI.style.left=Book_Image_Width+1+"px";
B_MI.src=B_RI.src;
B_MI.lnk=B_RI.lnk;

setTimeout("Book_Next_Delay()",Book_NextPage_Delay)}
else setTimeout("BookImages()",50)}
else setTimeout("BookImages()",50)}

function Book_Next_Delay(){
if(B_CrImg==Book_Image_Sources.length)B_CrImg=0;
B_RI.src=B_Pre_Img[B_CrImg].src;
B_RI.lnk=Book_Image_Sources[B_CrImg+1];
B_MI.style.zIndex=2;
B_LI.style.zIndex=1;
B_Angle=0;
B_CrImg+=2;
setTimeout("BookImages()",50)}

function B_LdLnk(){if(this.lnk)window.location.href=this.lnk}
function B_Stp(){B_Stppd=true;this.style.cursor=this.lnk?"pointer":"default"}
function B_Rstrt(){B_Stppd=false}
</script>

<div id="Book" style="position:relative; visibility: inherit;"><img src="../images/placeholder.gif" alt="Please move your mouse pointer away from this graphic to activate animation." width="10" height="10">
</div></td>
</tr>
<tr>

**jscheuer1** · 06-21-2005, 04:02 AM

This is a comment:

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" title="{Paused: please move mouse pointer away from graphic to continue">
</div>
width = 2*book image width +4 height = book image height+2

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

This is where I said to put it (at the end):

Code:

<div id="Book" style="position:relative; visibility: inherit;"><img src="../images/placeholder.gif" alt="Please move your mouse pointer away from this graphic to activate animation." width="10" height="10">
</div>

I see you've tried to cover all bases however, the alt attribute is often only used when no image is available and has no effect on tags other than image tags. Moreover, I said, if that doesn't work (it won't, I just discovered) use it for the division tag. You've added 'visibility:inherit' to it. I don't think it needs that. Anyways, this works here (use at the end of the script, not in the comment area):

Code:

<div id="Book" style="position:relative;" title="{PAUSED} - to restart, move mouse away from images">
<img src="placeholder.gif" width="144" height="227">
</div>

**mikep** · 06-21-2005, 07:33 AM

Ref: http://www.dynamicdrive.com/dynamicindex14/bookflip.htm

Brilliant, thanks John, that worked a treat, just wish I understood what you meant in the first place

Mike

Thread: Book flip image query

Thread Tools

Search Thread

Book flip image query

Book flip query

DD - Book Flip

Bookmarks

Bookmarks

Posting Permissions