# Ein Buch zum Durchblättern in Javascript zum Einbinden in HTML



## tuwamje (9. Juli 2010)

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...:


```
<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>
```


----------



## Sven Mintel (10. Juli 2010)

Moin,

da gibt es ein Problem an der ganzen Sache: Bilder kann man in ihrer Grösse ändern, das ergibt dann den dortigen Umblätter-Effekt.
Ändert man die Grösse einer Webseite, rutsch alles durcheinander, der Effekt ist dahin


----------



## Maik (10. Juli 2010)

Hi,

wäre hier die Realisation mit Flash nicht prädestinierter?

mfg Maik


----------



## Jan-Frederik Stieler (10. Juli 2010)

Hallo,
bezüglich des angesprochenen Flashs von Maik von mir noch Links zu sogenannten Pageflips:
http://www.megazine3.de/
http://pageflip.hu/ (sozusagen die Mutter aller Pageflips. Leider gibts die aktuelle Version nicht mehr als Freeware verfügbar, wie früher)
http://pageflip.hu/free.php
http://76design.com/shiftcontrol/index.php/2006/08/22/dynamic-page-flip-v2/

Es gibt inzwischen natürlich diese Pageflips wie Sand am Meer. Und mit Google wird man erschlagen wenn man dannach sucht.
Deshalb von mir mal eine kleine Auswahl die ich mir zumindest schonmal angeschaut habe.

Viele Grüße


----------



## tuwamje (10. Juli 2010)

Hallo Jungs und Mädels...

Erstmal recht vielen Dank für Eure starke Beteiligung an diesem für mich recht außergewöhnlichen Projekt. Es freut mich sehr, von Euch so große Unterstützung zu bekommen...

Sicher gibt es für Pageflips Angebote wie Sand am Meer, aner man kann da richtig reinfallen.
Es sind flash-ähnliche Strukturen, die dann nach Belieben geändert werden können und dem User wird eine benutzerfreundliche Oberfläche geboten.
In Flash wäre eine solche Benutzer-Oberfläche genau meine Kragenweite. Jedoch verstehe ich sehr wenig von diesem Zeug - es sieht sauber und seriös aus, aber ich kann die Scriptsprache einfach noch nicht richtig verstehen.
Ist denn die Pageflip kostenlos...? Ich habe erst mit der Arbeit dort in diesem Kloster angefangen und kann mir momentan keine Software-Programme selbst kaufen...und bis ich diese Know Hows von dieser Vorsteherin des Klosters bekomme, ist "Weihnachten"......

Einen kleinen Tipp an @Sven Mintel...:
Die Größe einer Webseite ist durch ene Art Frame veränderbar. Aber ich möchte keine 100 oder mehr Frames gestalten. Das ist a) zu aufwendig und b) nimmt es den Suchmaschinen bestimmte Funktionen, die die Suchmaschinen für ordnungsgemäße Votinglistings benötigen. Aber dieser Ansatz ist kein schlechter Gedanke... 


Eine Flash-Variante wäre für mich aber trotzdem sehr, sehr gut...

So - nun erst nochmal ein großes Danke...Euer MJE...


----------



## tuwamje (10. Juli 2010)

Ich bin es nochmal...

Ich hab mal eine Frage an @Jan-Frederik Stieler...:

Erstmal wäre für mich diese DPFl3 oder auch die Freeware genau das Richtige, wenn man in dieser PageFlip auch HTML-Dokumente einbinden oder einarbeiten kann - dann natürlich für mich der Favorit schlecht hin... Echt ADD-SUPER....

Nun eben hierzu meine Frage zu diesem Freeware-Angebot von http://pageflip.hu/free.php...:

kann ich diese PageFlips auch für html-Dateien verwenden...? Das ist für die Zielgruppen des Klosters unbedingt erforderlich.
Das bedeutet, dass die User das Buch durchstöbern - und wenn sie sich für ein Thema aus dem Buch interessieren, klicken sie es an und können in dieser HTML-Datei weitere Möglichkeiten nutzen...


http://pageflip.hu/free.php

DANKE DIR SPEZIELL NOCHMAL...GRUSS MJE


----------



## Sven Mintel (10. Juli 2010)

tuwamje hat gesagt.:


> Einen kleinen Tipp an @Sven Mintel...



Danke für den Tipp, das war mir gänzlich neu 

Man kann die Grösse einer Webseite übrigens auch über den Style des <body> ändern, falls du das nicht wusstest


----------



## tuwamje (10. Juli 2010)

An @Sven Mintel...:



> Man kann die Grösse einer Webseite übrigens auch über den Style des <body> ändern, falls du das nicht wusstest



Ja genau - so: 
	
	
	



```
<body height="" width="">...INHALT...</body>
```

Danke @Sven Mintel...

An alle wieder...:

Kann ich in diesen PageFlips auch HTML-Dokumente einbinden...? Das wäre echt ein gutes Know How für die Betrachter dieser Webseite...
Ich danke Euch für Eure Tipps und Tricks...

Bis dann...MJE...


----------



## Jan-Frederik Stieler (10. Juli 2010)

Hi,
also HTML kannst du, so wie du dir das warscheinlich vorstellst, nicht in Flash laden. Es gibt HTML-Textfelder wo du de nText mit ein paar HTML-Tags versehen kannst. Welche das genau sind wird sich in der Flashhilfe befinden.
Aber du solltest diesbezüglich dich mal mit dem Megazine 3 beschäftigen. Das ist soweit ich das bisher mitbekommen habe mit das potenteste was das Einbinden von unterschiedlichen Inhalten ist.

Viele Grüße


----------



## tuwamje (10. Juli 2010)

megazine3.de ist komplett in englischer Sprache...
Damit komm ich nicht ganz klar - obwohl es eine de-Seite ist. Mein English ist nicht perfekt - und mein technischen English bin ich absolut nicht bewandert. Ich verstehe nur Bruchteile - deshalb ist ein logisches Verständnis in dieser Materie undenkbar. Kann diese Seite übersetzt werden...? Denn mein Browser zeigt den Übersetzungslink nicht an weil die Seite schon eine de-Seite ist...

Kann ich das obere Script so umgestalten dass ich statt den Images die HTML-Seiten sehen kann...? Dann muss ich nicht ständig so viele Grafiken erzeugen, die ja auch sehr aufwendig zu gestalten sind. Außerdem sollen die User die Inhalte steuern können. Gibt es denn auch die Möglichkeit, den automatischen Seitenaufruf auf manuell per onClick zu steuern...? Dann hätte ich ja wenigstens eine solche Wahrnehmung, das wie ein Buch funktioniert.

Dann sind das alles Zip-Dateien und wenn ich die dann öffne, sind die teile schon in FLA gespeichert, die ich aber so nicht einbinden kann weil sie schon vordefiniert sind und ich habe keine Programme, mit dessen Hilfe ich diese für meine Zwecke umgestalten kann...

Ich brauche ein Programm, mit allen Funktionen - die mir aber noch alle zu teuer sind...

Danke...


----------



## ComFreek (10. Juli 2010)

Wenn du unbedingt die Website übersetzt lassen willst, kannst du Google Translator nutzen, aber erhoffe dir nicht zuviel davon


----------



## Jan-Frederik Stieler (10. Juli 2010)

HI,
also hier gibts das Wiki. Natürlich auch in Englisch.
Aber auf der Herstellerseite http://www.vservu.com/Home_de.htm findet man auch noch einige Hinweise wie das funktioniert.

Gruß


----------



## tuwamje (10. Juli 2010)

Ich habe nochmal eine Frage...an Euch...:

Kann ich den obigen Script so ummodeln dass ich aus den imagebook ein Framebook erhalte, wo sich die Frames blättern lassen...? In diesen Frames kann ich ja dann die HTML-Seiten platzieren, die dann für den User voll funktionsfähig wären... Oder geht das nicht...?

Wie schon mehrmals beschrieben, wären solche neckigen virtuellen Bücher schon eine gewisse Augenweite für alle User vor ihren Rechnern...

Oder gibt es die Möglichkeit, das Script in den Anweisungen wo Image steht, umzubenennen...?
Dann müssten ja die Anweisungen "Image" in "HTML" umbenannt werden...
Meine Frage...: geht das...? Ich habe mal das obere Script hier im Anschluss mal mit den geänderten Anweisungen reingestellt.
Die geänderten Anweisungen habe ich Euch mal ROT hervor gehoben...
Seht euch das mal bitte an, probiert das "Ding" mal aus und gebt mir bitte mal Eure Meinung...


HIER MAL DAS SCRIPT...:

```
<script type="text/javascript">


/********************************************************
	Create a div with transparent place holder in your html	
	<div id="Book" style="position:relative">
		<img src="main/placeholder.gif" width="639" height="257">
	</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=316;
	var Book_Image_Height=351;
	var Book_Border=true;
	var Book_Border_Color="#F1825C";
	var Book_Speed=20;
	var Book_NextPage_Delay=3800; //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(
		"gesch/gesch01.html","href=javascript:fenster1()",
		"gesch/gesch02.html","href=javascript:fenster2()",
		"gesch/gesch03.html","href=javascript:fenster3()",
		"gesch/gesch04.html","href=javascript:fenster4()",
		"gesch/gesch05.html","href=javascript:fenster5()",
		"gesch/gesch06.html","href=javascript:fenster6()",
		"gesch/gesch07.html","href=javascript:fenster7()", //this slide isn't linked
		"gesch/gesch08.html","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_HTML_Sources.length);

	function ImageBook(){
		if(document.getElementById){
			for(i=0;i<Book_HTML_Sources.length;i+=2){
				B_Pre_Img[i]=new HTML();B_Pre_Img[i].src=Book_HTML_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_HTML_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_HTML_Width+1)+"px";
			B_RI.style.top=0+"px";
			B_RI.style.left=(Book_Vertical_Turn?0:Book_HTML_Width+1)+"px";
			B_LI.style.height=Book_HTML_Height+"px";
			B_MI.style.height=Book_HTML_Height+"px";
			B_RI.style.height=Book_HTML_Height+"px";
			B_LI.style.width=Book_HTML_Width+"px";
			B_MI.style.width=Book_HTML_Width+"px";
			B_RI.style.width=Book_HTML_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_HTML_Sources[1];
			B_MI.src=B_Pre_Img[2].src;
			B_MI.lnk=Book_HTML_Sources[3];
			B_RI.src=B_Pre_Img[4].src;
			B_RI.lnk=Book_HTML_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 BookImage(){
		if(!B_Stppd){
			if(Book_Vertical_Turn){
				B_MSz=Math.abs(Math.round(Math.cos(B_Angle)*Book_HTML_Height));
				MidOffset=!B_Direction?Book_HTML_Height+1:Book_HTML_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_HTML_Width));
				MidOffset=B_Direction?Book_HTML_Width+1:Book_HTML_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_HTML_Sources.length)B_CrImg=0;
				B_MI.src=B_Pre_Img[B_CrImg].src;
				B_MI.lnk=Book_HTML_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=1+"px";
				else B_MI.style.left=Book_HTML_Width+1+"px";			
				B_MI.src=B_RI.src;
				B_MI.lnk=B_RI.lnk;

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

	function Book_Next_Delay(){
			if(B_CrImg==Book_HTML_Sources.length)B_CrImg=0;
			B_RI.src=B_Pre_Img[B_CrImg].src;
			B_RI.lnk=Book_HTML_Sources[B_CrImg+1];
			B_MI.style.zIndex=2;
			B_LI.style.zIndex=1;
			B_Angle=0;
			B_CrImg+=2;
		setTimeout("BookHTML()",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="casa/placeholder.gif" width="639" height="357">
	</div>
```

DANKE DANKE....


----------



## tuwamje (10. Juli 2010)

UPS....'
Jetzt sind in dem Quelltext (Script) die gewollten Rot-Markierungen nur mit den Code <COLOR="red"></COLOR="red"> gebunden. Das kann nun echt verwirren...
So ein Mist... Ich hoffe, Ihr wisst aber was ich mit dem Script meine...oder...;-)

Danke für Eure Vorschläge...
Liebe Grüße von MJE
- der Anfänger -


----------



## Maik (10. Juli 2010)

tuwamje hat gesagt.:


> UPS....'
> Jetzt sind in dem Quelltext (Script) die gewollten Rot-Markierungen nur mit den Code <COLOR="red"></COLOR="red"> gebunden. Das kann nun echt verwirren...
> So ein Mist... Ich hoffe, Ihr wisst aber was ich mit dem Script meine...oder...;-)


D'rum hab ich den [code=html] [/code]-Tag in [code] [/code] umgewandelt 

mfg Maik


----------



## tuwamje (10. Juli 2010)

...ja genau...
ich werde es mir für die zukunft merken...


----------



## Jan-Frederik Stieler (19. November 2010)

Hi,
mit HTML5 Canvas und Javascript läßt sich sowas hier realisieren. Ob man nun schon auf HTML5 setzen sollte laß ich jetzt mal so hingestellt.
Wie man das jetzt auch genau macht weiß ich nciht. Müßte mich selbst in die Materie einlesen.

Viele Grüße


----------



## tuwamje (19. November 2010)

Jan-Frederik Ich bedanke mich für deinen Hinweis...und werde mir das gleich mal näher ansehen...
Liebe Grüße von MJE


----------



## tuwamje (19. November 2010)

Hallo @all - aber mehr noch an Jan-Frederik...!
Habe mir gerade mal das Buch angesehen. Vom optischen ist es nicht schlecht. Allerdings sieht man nicht dass sich Seiten per Klick umblättern. Es wird nur mit jeder weiteren Seite das Frame erweitert - das heisst dass jede weitere Seite die man per onClick aufruft, in einem Frame geladen und dann somit angezeigt wird. Diese Variante hatte ich schon früher mal - so ähnlich. Sie ist allerdings für ein optisches Highlight nicht so wirklich mein Geschmack.
Auch habe ich versucht, mir mal deine anderen Vorschläge zu Nutze zu machen.
Hier ist sehr schwierig dass man per PDF alle Seiten neu gestalten und dann dem entsprechend konvertieren muss, damit dann das flashbook erzeugt werden kann. Auch ist hier wichtig dass man ein spezielles Programm benötigt, mit dem man das Flshbook zusammen stellen kann.

Die HTML5 mit JavaScript (Dein Hinweis) basiert auf eine einfache Nutzeroptik. Wie schon erwähnt, wird eine Frameseite erstellt, in der dann alle Html-Scripte für die Seiten wie ein Arrey per onClick in das Hauptframe geladen werden.

Ich habe auch ein Book, das genau so funktioniert, aber statt per onClick die verschiedenen Seiten automatisch aufruft. Der HTML-Code (bereits hier vorrätig) basiert darauf.

Meine Frage hierzu wäre, wie ich den bereits vorhandenen Codetext so umstrukturieren kann, damit sich diese Vorlaufseiten per onClick im Bookframe öffnen und der Nutzer sich die Seiten ganz in Ruhe ansehen kann und dann wenn er mit lesen und betrachten fertig ist, einfach den onClick-Button benutzt, wobei der Nutzer dann auch sieht, wie sich die Seite umblättert... Eine 3D-Book-Schablone für die grafische Aufwertung habe ich schon, die ich für diese Art von Book benötige...

Besten Dank und viele liebe Grüße
von MJE (Mirko)


----------

