Hallo an alle Javascript-Erfahrenen...
Für ein Klosterstift in der Nähe von Bautzen erstelle ich eine aktualisierte Homepage mit vielen Extras. Und wieder einmal muss ich mir eingestehen dass ich viel zu wenig über Javascript weiß...
Deshalb suche ich für ein Script-Buch einen Quellcode, das ich in die HTML-Seite einbinde. Durch das onMouseover-Prinzip soll der Betrachter vor dem Monitor die nächste Seite des Buches aufrufen, die sich wie bei einem regulären Buch aus Papier umblättern lässt. Auf den jeweiligen Seiten soll sich eine HTML-Datei ersichtlich machen, in der der Betrachter etwas über die Geschichte des Klosters erfährt und sich entsprechende Bilder ansehen kann. Ich weiß dass für solch ein HTML-Buch ein Arrey eingebunden wird, das die verschiedenen HTML-Seiten enthält und durch das onMouseover-Prinzip aus dem Arrey aufgerufen wird.
Wer kann mir da weiter helfen...? Ich bedanke mich ganz herzlich für Eure Unterstützung...
Hier eine ungefähre Vorstellung, wie das Buch aussehen kann - jedoch wäre ich darüber sehr erfreut, wenn Ihr mir verraten könnt, wie man es hinbekommt, dass der Effekt des Umblätterns - so wie bei den verschiedenen Online-Bücherspripts von Bestell-Katalog-Firmen - wie damals Quelle das hatte.
Das Umblättern der einzelnen Seiten erfolgt im unteren Quellcode automatisch. Ich möchte das Umblättern der einzelnen Seiten durch den onMouseover-Effekt erzwingen. Statt der Javascript-Anweisungen im Arrey sollen die einzelnen HTML-Dokumente eingebunden werden.
Der Quellcode...:
Für ein Klosterstift in der Nähe von Bautzen erstelle ich eine aktualisierte Homepage mit vielen Extras. Und wieder einmal muss ich mir eingestehen dass ich viel zu wenig über Javascript weiß...
Deshalb suche ich für ein Script-Buch einen Quellcode, das ich in die HTML-Seite einbinde. Durch das onMouseover-Prinzip soll der Betrachter vor dem Monitor die nächste Seite des Buches aufrufen, die sich wie bei einem regulären Buch aus Papier umblättern lässt. Auf den jeweiligen Seiten soll sich eine HTML-Datei ersichtlich machen, in der der Betrachter etwas über die Geschichte des Klosters erfährt und sich entsprechende Bilder ansehen kann. Ich weiß dass für solch ein HTML-Buch ein Arrey eingebunden wird, das die verschiedenen HTML-Seiten enthält und durch das onMouseover-Prinzip aus dem Arrey aufgerufen wird.
Wer kann mir da weiter helfen...? Ich bedanke mich ganz herzlich für Eure Unterstützung...
Hier eine ungefähre Vorstellung, wie das Buch aussehen kann - jedoch wäre ich darüber sehr erfreut, wenn Ihr mir verraten könnt, wie man es hinbekommt, dass der Effekt des Umblätterns - so wie bei den verschiedenen Online-Bücherspripts von Bestell-Katalog-Firmen - wie damals Quelle das hatte.
Das Umblättern der einzelnen Seiten erfolgt im unteren Quellcode automatisch. Ich möchte das Umblättern der einzelnen Seiten durch den onMouseover-Effekt erzwingen. Statt der Javascript-Anweisungen im Arrey sollen die einzelnen HTML-Dokumente eingebunden werden.
Der Quellcode...:
HTML:
<script type="text/javascript">
/********************************************************
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=260;
var Book_Image_Height=186;
var Book_Border=true;
var Book_Border_Color="#c0c4f9";
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(
"bildimg/urlaub00.jpg","href=javascript:fenster1()",
"bildimg/mje3a.jpg","href=javascript:fenster2()",
"bildimg/tvwerbung.jpg","href=javascript:fenster3()",
"bildimg/angebote.jpg","href=javascript:fenster4()",
"bildimg/network.jpg","href=javascript:fenster5()",
"bildimg/office.jpg","href=javascript:fenster6()",
"bildimg/tuwa.jpg","href=javascript:fenster7()>", //this slide isn't linked
"bildimg/0001url07.jpg","href=javascript:fenster8()" // 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_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>
<body onload="ImageBook()">
<div id="Book" style="position:relative">
<img src="placeholder.gif" width="264" height="190">
</div>
