Results 1 to 5 of 5

Thread: Book flip image query

  1. #1
    Join Date
    Oct 2004
    Posts
    25
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Question Book flip image query

    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

  2. #2
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    30,495
    Thanks
    82
    Thanked 3,449 Times in 3,410 Posts
    Blog Entries
    12

    Default

    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.
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  3. #3
    Join Date
    Oct 2004
    Posts
    25
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Question Book flip query

    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>

  4. #4
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    30,495
    Thanks
    82
    Thanked 3,449 Times in 3,410 Posts
    Blog Entries
    12

    Default

    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>
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  5. #5
    Join Date
    Oct 2004
    Posts
    25
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Talking DD - Book Flip

    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

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •