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

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...:
Code: 
<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....
 
Zuletzt bearbeitet von einem Moderator:
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 - :):):)
 
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...;-)
Zum Vergrößern anklicken....
D'rum hab ich den [code=html] [/code]-Tag in [code] [/code] umgewandelt ;)

mfg Maik
 
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
 
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)
 
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück