Sie sind auf Seite 1von 3

<html>

<body onload="imagebook()">

<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=140;
var book_image_height=225;
var book_border=true;
var book_border_color="gray";
var book_speed=15;
var book_nextpage_delay=1500;
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(
"photo1.jpg","http://www.dynamicdrive.com",
"photo2.jpg","http://www.javascriptkit.com",
"photo3.jpg","", //this slide isn't linked
"photo4.jpg","http://www.codingforums.com" // note no comma after last line
);

/***************** 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_c
olor}
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">


<img src="placeholder.gif" width="144" height="227">
</div>
<p><font face="arial" size="-2">free dhtml scripts provided by<br><a
href="http://www.dynamicdrive.com">dynamic drive</a></font></p>

</body>

</html>

Das könnte Ihnen auch gefallen