File html con procedure javascript per creare effetto libro da sfogliare

**cavaliere123** · 05-08-2012, 19:13

Buonasera a tutti, ringraziando gli esperti sempre solerti vado a porre una questione che spero sia di semplice risposta, ho trovato questo script che crea un effetto libro con immagini a sequenza.... ma ho notato che sta usando i div per creare il box dove inserire il riquadro poi delle immagini sulla pagina.
Chiaramente usa gli attributi absolute e cosi il div non si muove dal centro della pagina e invece io vorrei come al mio solito inserirlo in una tabella dove nelle altre celle metto altre cose... ma ammetto la mia ignoranza non sapendo come togliere il parametro dv e sostituire il codice

(
Sono riucito a sfrondare il codice originale di tante cose inutili, ho assegnato le class per evitare problemi con il css, ma i dv no...
Vi posto il contenuto e immaginate che desidero usare una tabella 2 x 2, è possibile un vostro aiuto ??

Codice HTML:

<HTML class="librone">

<HEAD>

<meta http-equiv="imagetoolbar" content="no">
<style type="text/css">

<!-- 
	html.librone {
		overflow: hidden;
	}

	body.libro {
		margin: 0px;
		padding: 0px;
		background:trasparent;
		
		width: 100%;
		height: 100%;
		
	}

	#center {
		position:absolute;
		left: 50%;
		top: 50%;
	}
	#DHTMLBOOK {
		position: relative;
		background: #000;
		width: 420px;
		height: 320px;
		left: -210px;
		top: -160px;
		visibility: hidden;
	}
	#TXTBOX {
		position: relative;
		font-family: verdana;
		color: #aba193;
		font-size: .8em;
		width: 410px;
		text-align: center;
		top: 320px;
	}
	.page {
		position: absolute;
		overflow: hidden;
		width: 50%;
		height: 100%;
		border-left: #000000 solid 1px;
	}
	.right {
		left: 50%;
		border-right: #000000 solid 1px;
	}
	.turn {
		background: trasparent;
	}
	
      .img {
		position: absolute;
		height: 100%;
		width: 200%;
	}
 -->	
	
</style>

<script type="text/javascript">
 <!--  

document.onselectstart = function () { return false; }

var nI  = 0;
var kI  = 0;
var run = false;

function setOpacity(obj,o) {
	if (o<0) o=0; else if (o>100) o = 100;
	if (obj.filters)obj.filters.alpha.opacity=o; else obj.style.opacity = o/100;
}
function TPR__(p) {
	P1.style.left  = 50-(2.5*p)+"%";
	P1.style.width = (2.5*p)+"%";
	setOpacity(P1i, .5*p*p);
	if (p == 20) run = false;
}
function TPR_(p) {
	P2.style.width = 50-(2.5*p)+"%";
	setOpacity(P2i, 100-.5*(p*p));
	if (p == 20) {
		P2i.src = IMGSRC[kI].src;
		setOpacity(P2i, 100);
		P2.style.width = "50%";
		for(var i=1; i<=20; i++) setTimeout("TPR__("+i+")", i*32);
	}
}
function TPR() {
	if (!run) {
		run = true;
		P01i.src = IMGSRC[kI].src;
		P1.style.width = 0;
		kI++;
		if (kI>=nI) kI = 0;
		titLe(kI);
		P02i.src = IMGSRC[kI].src;
		P1i.src  = IMGSRC[kI].src;
		for (var i=1; i<=20; i++) setTimeout("TPR_("+i+")", i*32);
	} else setTimeout("TPR()", 100);
}

function TPL__(p) {
	P2.style.width = (2.5*p)+"%";
	setOpacity(P2i, .5*p*p);
	if (p == 20) run = false;
}
function TPL_(p) {
	P1.style.left  = (2.5*p)+"%";
	P1.style.width = 40+(10-2.5*p)+"%";
	setOpacity(P1i, 100-.5*(p*p));
	if (p == 20) {
		P1i.src = IMGSRC[kI].src;
		setOpacity(P1i, 100);
		P1.style.left  = 0;
		P1.style.width = "50%";
		for(var i=1; i<=20; i++) setTimeout("TPL__("+i+")", i*32);
	}
}
function TPL() {
	if (!run) {
		run = true;
		P02i.src = IMGSRC[kI].src;
		P2.style.width = 0;
		kI--;
		if (kI < 0) kI = nI-1;
		titLe(kI);
		P01i.src = IMGSRC[kI].src;
		P2i.src  = IMGSRC[kI].src;
		for(var i=1; i<=20; i++) setTimeout("TPL_("+i+")", i*32);
	} else setTimeout("TPL()", 100);
}

function titLe(p) {
	document.getElementById("TXTBOX").innerHTML = IMGSRC[p].alt;
}


onload = function() {
	IMGSRC  = document.getElementById("imgsrc").getElementsByTagName("img");
	DB      = document.getElementById("DHTMLBOOK");
	P01     = DB.getElementsByTagName("span")[0];
	P01i    = P01.getElementsByTagName("img")[0];
	P02     = DB.getElementsByTagName("span")[1];
	P02i    = P02.getElementsByTagName("img")[0];
	P1      = DB.getElementsByTagName("span")[2];
	P1i     = P1.getElementsByTagName("img")[0];
	P2      = DB.getElementsByTagName("span")[3];
	P2i     = P2.getElementsByTagName("img")[0];
	nI      = IMGSRC.length;
	P1i.src = IMGSRC[kI].src;
	P2i.src = IMGSRC[kI].src;
	titLe(kI);
	DB.style.visibility = "visible";
}
// -->
</script>

</head>



<body class="libro">

<div id="center">
	<div id="DHTMLBOOK">
		<span class="page" onmousedown="return false;" ondblclick="TPL();" onclick="TPL();"><img class="img"></span>
		<span class="page right" onmousedown="return false;" ondblclick="TPR();" onclick="TPR();"><img class="img" style="left:-100%"></span>
		<span class="page turn" onmousedown="return false;" ondblclick="TPL();" onclick="TPL();"><img class="img" style="opacity:1;filter:alpha()"></span>
		<span class="page turn right" onmousedown="return false;" ondblclick="TPR();" onclick="TPR();"><img class="img" style="opacity:1;filter:alpha();left:-100%"></span>
		<div id="TXTBOX"></div>
	</div>
</div>

<div id="imgsrc" style="visibility:hidden;">
        <img alt="descrizione immagine 1" src="http://4.bp.blogspot.com/-IR8M7jqaZFU/UB2Rq7D_llI/AAAAAAAAA7Q/2TlECVPWl-c/s1600/Isaac+Asimov.jpg">
	<img alt="descrizione immagine 2" src="http://4.bp.blogspot.com/-zFssZZQ1Yvg/UBsmugxz7YI/AAAAAAAAA1s/eW-vDZl9Bwk/s1600/oscar_wilde.jpg">
	<img alt="descrizione immagine 3" src="http://3.bp.blogspot.com/-BdDkKYnUosI/UBsmuEwfYPI/AAAAAAAAA1k/QHCike
</div>
 
</body>

</HTML>

Grazie in anticipato

)
Domenico.

**cavaliere123** · 05-08-2012, 19:25

Non desidero usare i parametri dv perchè poi questi script finiscono nel mio blog in piattaforma blogger e i div non sono molto ben gestiti dai gadget html ... non per una antipatia o un non volerli comprendere... tanto li sto studiando lo stesso

**cavaliere123** · 05-08-2012, 22:54

ho modificato cosi :

Codice HTML:

<body class="libro">

<table style="text-align: left; width:100%;"
 border="3" cellpadding="2" cellspacing="2">
    <tr>
      <td id="center">
	<p id="DHTMLBOOK">
		<span class="page" onmousedown="return false;" ondblclick="TPL();" onclick="TPL();"><img class="img"></span>
		<span class="page right" onmousedown="return false;" ondblclick="TPR();" onclick="TPR();"><img class="img" style="left:-100%"></span>
		<span class="page turn" onmousedown="return false;" ondblclick="TPL();" onclick="TPL();"><img class="img" style="opacity:1;filter:alpha()"></span>
		<span class="page turn right" onmousedown="return false;" ondblclick="TPR();" onclick="TPR();"><img class="img" style="opacity:1;filter:alpha();left:-100%"></span>
		<p id="TXTBOX"></p>
	</p>
           </td>
    </tr>
<tr>
<td id="imgsrc" style="visibility:hidden;">
        <img alt="descrizione immagine 1" src="http://4.bp.blogspot.com/-IR8M7jqaZFU/UB2Rq7D_llI/AAAAAAAAA7Q/2TlECVPWl-c/s1600/Isaac+Asimov.jpg">
	<img alt="descrizione immagine 2" src="http://4.bp.blogspot.com/-zFssZZQ1Yvg/UBsmugxz7YI/AAAAAAAAA1s/eW-vDZl9Bwk/s1600/oscar_wilde.jpg">
	<img alt="descrizione immagine 3" src="http://3.bp.blogspot.com/-BdDkKYnUosI/UBsmuEwfYPI/AAAAAAAAA1k/QHCike

</td>
    </tr>


</body>

in effetti lo script funziona ma spuntano due tabelle una sopra e una a lato e il testo dell'alt dell'immagine scomparso....

(

**criric** · 05-08-2012, 23:20

Ciao,
dopo un po mi sono arreso

di seguito alcune annotazioni

Codice:

html.librone, body.libro

Non ha senso dare un classe al body o all'html

Codice:

background-color:transparent;
width: 100%;
height: 100%;

non hanno senso sul body

Codice:

<meta http-equiv="imagetoolbar" content="no">

mai visto prima

Codice:

.turn {
  background: trasparent;
}

semmai transparent

Codice:

document.onselectstart = function () { 
   return false; 
}

non ne capisco l'utilità

Codice:

onmousedown="return false;"

???? a che serve?

Codice:

ondblclick="TPL();" onclick="TPL();

onclick non basta?

Codice:

filter:alpha()

al massimo filter:alpha;

Codice:

<img alt="descrizione immagine 3" src="http://3.bp.blogspot.com/-BdDkKYnUosI/UBsmuEwfYPI/AAAAAAAAA1k/QHCike

manca un pezzo

Auguri

**cavaliere123** · 06-08-2012, 00:21

Scusami se te lo chiedo molto gentilmente.... hai ragione è un casotto e poco alla volta sto cercando di mettere ordine.... se ti va la mia domanda è un'altra... puoi darmi una mano ad eliminare i div sostituendoli con una tabella ??? solo questo se ti va ed è possibile...

))
Grazie...

**cavaliere123** · 06-08-2012, 00:46

Ho corretto il file secondo le indicazioni ed eccolo qua :

Codice HTML:

<HTML>

<HEAD>


<style type="text/css">

<!-- 

	#center {
		position:absolute;
		left: 50%;
		top: 50%;
	}
	#DHTMLBOOK {
		position: relative;
		background: #000;
		width: 420px;
		height: 320px;
		left: -210px;
		top: -160px;
		visibility: hidden;
	}
	#TXTBOX {
		position: relative;
		font-family: verdana;
		color: #aba193;
		font-size: .8em;
		width: 410px;
		text-align: center;
		top: 320px;
	}
	.page {
		position: absolute;
		overflow: hidden;
		width: 50%;
		height: 100%;
		border-left: #000000 solid 1px;
	}
	.right {
		left: 50%;
		border-right: #000000 solid 1px;
	}
	.turn {
		background: transparent;
	}
	
      .img {
		position: absolute;
		height: 100%;
		width: 200%;
	}
 -->	
	
</style>

<script type="text/javascript">
 <!--  

document.onselectstart = function () { return false; }

var nI  = 0;
var kI  = 0;
var run = false;

function setOpacity(obj,o) {
	if (o<0) o=0; else if (o>100) o = 100;
	if (obj.filters)obj.filters.alpha.opacity=o; else obj.style.opacity = o/100;
}
function TPR__(p) {
	P1.style.left  = 50-(2.5*p)+"%";
	P1.style.width = (2.5*p)+"%";
	setOpacity(P1i, .5*p*p);
	if (p == 20) run = false;
}
function TPR_(p) {
	P2.style.width = 50-(2.5*p)+"%";
	setOpacity(P2i, 100-.5*(p*p));
	if (p == 20) {
		P2i.src = IMGSRC[kI].src;
		setOpacity(P2i, 100);
		P2.style.width = "50%";
		for(var i=1; i<=20; i++) setTimeout("TPR__("+i+")", i*32);
	}
}
function TPR() {
	if (!run) {
		run = true;
		P01i.src = IMGSRC[kI].src;
		P1.style.width = 0;
		kI++;
		if (kI>=nI) kI = 0;
		titLe(kI);
		P02i.src = IMGSRC[kI].src;
		P1i.src  = IMGSRC[kI].src;
		for (var i=1; i<=20; i++) setTimeout("TPR_("+i+")", i*32);
	} else setTimeout("TPR()", 100);
}

function TPL__(p) {
	P2.style.width = (2.5*p)+"%";
	setOpacity(P2i, .5*p*p);
	if (p == 20) run = false;
}
function TPL_(p) {
	P1.style.left  = (2.5*p)+"%";
	P1.style.width = 40+(10-2.5*p)+"%";
	setOpacity(P1i, 100-.5*(p*p));
	if (p == 20) {
		P1i.src = IMGSRC[kI].src;
		setOpacity(P1i, 100);
		P1.style.left  = 0;
		P1.style.width = "50%";
		for(var i=1; i<=20; i++) setTimeout("TPL__("+i+")", i*32);
	}
}
function TPL() {
	if (!run) {
		run = true;
		P02i.src = IMGSRC[kI].src;
		P2.style.width = 0;
		kI--;
		if (kI < 0) kI = nI-1;
		titLe(kI);
		P01i.src = IMGSRC[kI].src;
		P2i.src  = IMGSRC[kI].src;
		for(var i=1; i<=20; i++) setTimeout("TPL_("+i+")", i*32);
	} else setTimeout("TPL()", 100);
}

function titLe(p) {
	document.getElementById("TXTBOX").innerHTML = IMGSRC[p].alt;
}


onload = function() {
	IMGSRC  = document.getElementById("imgsrc").getElementsByTagName("img");
	DB      = document.getElementById("DHTMLBOOK");
	P01     = DB.getElementsByTagName("span")[0];
	P01i    = P01.getElementsByTagName("img")[0];
	P02     = DB.getElementsByTagName("span")[1];
	P02i    = P02.getElementsByTagName("img")[0];
	P1      = DB.getElementsByTagName("span")[2];
	P1i     = P1.getElementsByTagName("img")[0];
	P2      = DB.getElementsByTagName("span")[3];
	P2i     = P2.getElementsByTagName("img")[0];
	nI      = IMGSRC.length;
	P1i.src = IMGSRC[kI].src;
	P2i.src = IMGSRC[kI].src;
	titLe(kI);
	DB.style.visibility = "visible";
}
// -->
</script>

</head>



<body>

<table style="text-align: left; width:100%;"
 border="3" cellpadding="2" cellspacing="2">
    <tr>
      <td id="center">
	<p id="DHTMLBOOK">
		<span class="page"  ondblclick="TPL();" onclick="TPL();"><img class="img"></span>
		<span class="page right"  ondblclick="TPR();" onclick="TPR();"><img class="img" style="left:-100%"></span>
		<span class="page turn"  ondblclick="TPL();" onclick="TPL();"><img class="img" style="opacity:1;filter:alpha;"></span>
		<span class="page turn right" ondblclick="TPR();" onclick="TPR();"><img class="img" style="opacity:1;filter:alpha;left:-100%"></span>
		<p id="TXTBOX"></p>
	</p>
           </td>
    </tr>
<tr>
<td id="imgsrc" style="visibility:hidden;">
        <img alt="descrizione immagine 1" src="http://4.bp.blogspot.com/-IR8M7jqaZFU/UB2Rq7D_llI/AAAAAAAAA7Q/2TlECVPWl-c/s1600/Isaac+Asimov.jpg">
	<img alt="descrizione immagine 2" src="http://4.bp.blogspot.com/-zFssZZQ1Yvg/UBsmugxz7YI/AAAAAAAAA1s/eW-vDZl9Bwk/s1600/oscar_wilde.jpg">
	<img alt="descrizione immagine 3" src="http://3.bp.blogspot.com/-BdDkKYnUosI/UBsmuEwfYPI/AAAAAAAAA1k/QHCike47mvA/s1600/io_sono_leggenda.jpg">
</td>
    </tr>


</body>

</HTML>

Mi resta sempre lo stesso problema... togliere i div e inserire l'immagine dinamica in una tabella

**borgo italia** · 06-08-2012, 07:22

ciao
prova a trasformare i div in questa maniera (al massimo non funzia)

Codice HTML:

<table width="100%"  border="0" align="center" cellpadding="0" cellspacing="0">
	<tr id="DHTMLBOOK">
    	<td width="50%">
			<span class="page" onmousedown="return false;" ondblclick="TPL();" onclick="TPL();"><img class="img"></span>
			<span class="page right" onmousedown="return false;" ondblclick="TPR();" onclick="TPR();"><img class="img" style="left:-100%"></span>
			<span class="page turn" onmousedown="return false;" ondblclick="TPL();" onclick="TPL();"><img class="img" style="opacity:1;filter:alpha()"></span>
			<span class="page turn right" onmousedown="return false;" ondblclick="TPR();" onclick="TPR();"><img class="img" style="opacity:1;filter:alpha();left:-100%"></span>
		</td>
    	<td id="TXTBOX"></td>
	</tr>
	<tr id="imgsrc" style="visibility:hidden;">
		<td colspan="2">
			<img alt="descrizione immagine 1" src="http://4.bp.blogspot.com/-IR8M7jqaZFU/UB2Rq7D_llI/AAAAAAAAA7Q/2TlECVPWl-c/s1600/Isaac+Asimov.jpg">
			<img alt="descrizione immagine 2" src="http://4.bp.blogspot.com/-zFssZZQ1Yvg/UBsmugxz7YI/AAAAAAAAA1s/eW-vDZl9Bwk/s1600/oscar_wilde.jpg">
			<img alt="descrizione immagine 3" src="http://3.bp.blogspot.com/-BdDkKYnUosI/UBsmuEwfYPI/AAAAAAAAA1k/QHCike47mvA/s1600/io_sono_leggenda.jpg">
		</td>
	</tr>
</table>

però alle classi e/o id che si riferiscono ai tr e td nel css togli i riferimenti alle posizioni che per i tr e td non hanno senzo

**cavaliere123** · 06-08-2012, 15:18

Infatti non funziona
Ho provato cosi :

Codice HTML:

<table style="text-align: center; width: 80%;" border="2" cellpadding="2" cellspacing="2">
    <tr>
        <td>
      <table style="text-align: left; width: 80%;" border="1"
 cellpadding="2" cellspacing="2">
          <tr>
            <td id="DHTMLBOOK">   
                <span class="page"  ondblclick="TPL();" onclick="TPL();"><img class="img"></span>
		<span class="page right"  ondblclick="TPR();" onclick="TPR();"><img class="img" style="left:-100%"></span>
		<span class="page turn"  ondblclick="TPL();" onclick="TPL();"><img class="img" style="opacity:1;filter:alpha;"></span>
		<span class="page turn right" ondblclick="TPR();" onclick="TPR();"><img class="img" style="opacity:1;filter:alpha;left:-100%"></span>
       
<table style="text-align: center; width: 80%;" border="1"
 cellpadding="2" cellspacing="2">
          <tr>  <td id="TXTBOX"></td></tr></table>
          </td></tr></table>
             
<table style="text-align: left; width: 80%;" border="1"
 cellpadding="2" cellspacing="2"> 
<tr>
            <td id="imgsrc" style="visibility:hidden;"> 
        <img alt="descrizione immagine 1" src="http://4.bp.blogspot.com/-IR8M7jqaZFU/UB2Rq7D_llI/AAAAAAAAA7Q/2TlECVPWl-c/s1600/Isaac+Asimov.jpg">
	<img alt="descrizione immagine 2" src="http://4.bp.blogspot.com/-zFssZZQ1Yvg/UBsmugxz7YI/AAAAAAAAA1s/eW-vDZl9Bwk/s1600/oscar_wilde.jpg">
	<img alt="descrizione immagine 3" src="http://3.bp.blogspot.com/-BdDkKYnUosI/UBsmuEwfYPI/AAAAAAAAA1k/QHCike47mvA/s1600/io_sono_leggenda.jpg">
</td></tr></table>

</td></tr></table>

cioè a posto dei box dei vari id ho creato delle celle interne....
ma purtroppo di sicuro in tutto il codice bisognerebbe cambiare ad hoc, come ad esempio il comando <span , in effetti non crea pure lui un box ???

Si può provare a riscriverlo l'intero codice evitando a priori qualsiasi tipo di box o contenitori ???

**cavaliere123** · 06-08-2012, 15:24

Guardando bene tutto il codice la funzione da cambiare me sa che è : onload = function()... me la sto studiando passo passo.... ma ...

**cavaliere123** · 06-08-2012, 16:42

Ho provato a fare secondo l'esperienza di script già visti e elaborati e funzionanti una cosa similare :

Codice HTML:

<HTML>

<HEAD>


<style type="text/css">

<!-- 

          
 -->	
	
</style>



</head>



<body>

<table style="text-align: center; width: 80%;" border="2" cellpadding="2" cellspacing="2">
    <tr>
        <td id="DHTMLBOOK">

                <span class="page" onmousedown="return false;" ondblclick="TPL();" onclick="TPL();"><img class="img"></span>
		<span class="page right" onmousedown="return false;" ondblclick="TPR();" onclick="TPR();"><img class="img" style="left:-100%"></span>
		<span class="page turn" onmousedown="return false;" ondblclick="TPL();" onclick="TPL();"><img class="img" style="opacity:1;filter:alpha()"></span>
		<span class="page turn right" onmousedown="return false;" ondblclick="TPR();" onclick="TPR();"><img class="img" style="opacity:1;filter:alpha();left:-100%"></span>
     

</td> 

<td id="TXTBOX"></td> 
   </tr>
      
<tr> <td id="imgsrc" style="visibility:hidden;">
<img alt="descrizione immagine 1" src="http://4.bp.blogspot.com/-IR8M7jqaZFU/UB2Rq7D_llI/AAAAAAAAA7Q/2TlECVPWl-c/s1600/Isaac+Asimov.jpg">
	<img alt="descrizione immagine 2" src="http://4.bp.blogspot.com/-zFssZZQ1Yvg/UBsmugxz7YI/AAAAAAAAA1s/eW-vDZl9Bwk/s1600/oscar_wilde.jpg">
	<img alt="descrizione immagine 3" src="http://3.bp.blogspot.com/-BdDkKYnUosI/UBsmuEwfYPI/AAAAAAAAA1k/QHCike

</td></tr></table> 		




<script type="text/javascript">
 <!--  

document.onselectstart = function () { return false; }

var nI  = 0;
var kI  = 0;
var run = false;

function setOpacity(obj,o) {
	if (o<0) o=0; else if (o>100) o = 100;
	if (obj.filters)obj.filters.alpha.opacity=o; else obj.style.opacity = o/100;
}
function TPR__(p) {
	P1.style.left  = 50-(2.5*p)+"%";
	P1.style.width = (2.5*p)+"%";
	setOpacity(P1i, .5*p*p);
	if (p == 20) run = false;
}
function TPR_(p) {
	P2.style.width = 50-(2.5*p)+"%";
	setOpacity(P2i, 100-.5*(p*p));
	if (p == 20) {
		P2i.src = IMGSRC[kI].src;
		setOpacity(P2i, 100);
		P2.style.width = "50%";
		for(var i=1; i<=20; i++) setTimeout("TPR__("+i+")", i*32);
	}
}
function TPR() {
	if (!run) {
		run = true;
		P01i.src = IMGSRC[kI].src;
		P1.style.width = 0;
		kI++;
		if (kI>=nI) kI = 0;
		titLe(kI);
		P02i.src = IMGSRC[kI].src;
		P1i.src  = IMGSRC[kI].src;
		for (var i=1; i<=20; i++) setTimeout("TPR_("+i+")", i*32);
	} else setTimeout("TPR()", 100);
}

function TPL__(p) {
	P2.style.width = (2.5*p)+"%";
	setOpacity(P2i, .5*p*p);
	if (p == 20) run = false;
}
function TPL_(p) {
	P1.style.left  = (2.5*p)+"%";
	P1.style.width = 40+(10-2.5*p)+"%";
	setOpacity(P1i, 100-.5*(p*p));
	if (p == 20) {
		P1i.src = IMGSRC[kI].src;
		setOpacity(P1i, 100);
		P1.style.left  = 0;
		P1.style.width = "50%";
		for(var i=1; i<=20; i++) setTimeout("TPL__("+i+")", i*32);
	}
}
function TPL() {
	if (!run) {
		run = true;
		P02i.src = IMGSRC[kI].src;
		P2.style.width = 0;
		kI--;
		if (kI < 0) kI = nI-1;
		titLe(kI);
		P01i.src = IMGSRC[kI].src;
		P2i.src  = IMGSRC[kI].src;
		for(var i=1; i<=20; i++) setTimeout("TPL_("+i+")", i*32);
	} else setTimeout("TPL()", 100);
}

function titLe(p) {
	document.getElementById("txtbox").innerHTML = IMGSRC[p].alt;
}


       function inserimento() {
	IMGSRC  = document.getElementById("imgsrc").getElementsByTagName("img");
	DB      = document.getElementById("DHTMLBOOK");
	P01     = DB.getElementsByTagName("span")[0];
	P01i    = P01.getElementsByTagName("img")[0];
	P02     = DB.getElementsByTagName("span")[1];
	P02i    = P02.getElementsByTagName("img")[0];
	P1      = DB.getElementsByTagName("span")[2];
	P1i     = P1.getElementsByTagName("img")[0];
	P2      = DB.getElementsByTagName("span")[3];
	P2i     = P2.getElementsByTagName("img")[0];
	nI      = IMGSRC.length;
	P1i.src = IMGSRC[kI].src;
	P2i.src = IMGSRC[kI].src;
	titLe(kI);
	DB.style.visibility = "visible";
}

</script>


</body>

</HTML>

ma ti pareva che andasse....

( potete per cortesia dargli uno sguardo....
ho sostituito i vari id con inserimenti in tabella con : id = " xxx" ;.... ma non li legge ...

Discussione: File html con procedure javascript per creare effetto libro da sfogliare

Strumenti Discussione

Visualizzazione

File html con procedure javascript per creare effetto libro da sfogliare

Precisazione

Provato con le tabelle

Scusami

Corretto secondo indicazioni

Non funziona

Altra prova

Tag per Questa Discussione

Permessi di Scrittura