Aiutamici Forum
Benvenuto Ospite Cerca | Topic Attivi | Utenti | | Log In | Registra

ancora aiuto "effetto sfoglia" Opzioni
simonettad
Inviato: Tuesday, November 25, 2008 3:00:48 PM

Rank: AiutAmico

Iscritto dal : 6/2/2008
Posts: 139
Ciao, ci risiamo! Sono di nuovo qui e per una cosa che mi avevate già spiegato ma che non riesco a fare.
Effetto sfoglia, orbene ho creato una cartella chiamata UNO, qui ho inserito 4 immagini chiamate 1A 2A 3A 4A, sono solo quadrati di diverso colore da usare per prova e poi ho creato una pagina con kompozer, taglia e copia degli ordini da web-link.
a : <img alt="descrizione immagine 1" src="UNO/1A
ma non va, dov'è che sbaglio? sto diventando matta, aiutatemi!
Grazie, Simonetta


<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta name="Author"
content="Gerard Ferrandez at http://www.dhteumeuleu.com">
<meta http-equiv="imagetoolbar" content="no">
<style type="text/css">
html {
overflow: hidden;
}
body {
margin: 0px;
padding: 0px;
background: #111;
position: absolute;
width: 100%;
height: 100%;
cursor: crosshair;
}
#center {
position:absolute;
left: 50%;
top: 50%;
}
#DHTMLBOOK {
position: relative;
background: #000;
width: 420px;
height: 320px;
left: -360px;
top: -280px;
visibility: hidden;
}
#TXTBOX {
position: absolute;
font-family: verdana;
color: #aba193;
font-size: .8em;
width: 410px;
text-align: center;
top: 320px;
}
.page {
position: absolute;
cursor: pointer;
overflow: hidden;
width: 50%;
height: 100%;
border-left: #000000 solid 1px;
}
.right {
left: 50%;
border-right: #000000 solid 1px;
}
.turn {
background: #000000;
}
.img {
position: absolute;
height: 100%;
width: 200%;
}
</style>
<script type="text/javascript"><!-- // ============================================================
// __| _ | | |
// (_ | -_) | _` | _ \ _ \ _|
// \___|\___| _|\__,_|\___/\___/\__|
// ------------------------------------------------------------
// script: Gerard Ferrandez - Ge-1-doot - August 2oo3
// http://www.dhteumeuleu.com
// ============================================================
// Prelevato, spiegato ed illustrato su http://www.web-link.it
// ============================================================
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>
<meta content="text/html; charset=ISO-8859-1"
http-equiv="content-type">
<title>UNO</title>
</head>
<body>
<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;"></span><span
class="page turn right" onmousedown="return false;"
ondblclick="TPR();" onclick="TPR();"><img
class="img" style="opacity: 1; left: -100%;"></span>
<div id="TXTBOX"></div>
</div>
</div>
<div id="imgsrc" style="visibility: hidden;">
<img alt="descrizione immagine 1" src="UNO/1A.jpg"><img
alt="descrizione immagine 2" src="UNO/2A.jpg"><img
alt="descrizione immagine 3" src="UNO/3A.jpg"><img
alt="descrizione immagine 4" src="UNO/4A.jpg%22"><img><br>
</div>
</body>
</html>
Sponsor
Inviato: Tuesday, November 25, 2008 3:00:48 PM

 
ecofive
Inviato: Tuesday, November 25, 2008 5:36:44 PM

Rank: AiutAmico

Iscritto dal : 6/20/2008
Posts: 7,111
Ho dato un'occhiata rapida allo scipt. Non ho controllato riga per riga ma subito ho notato una cosa (nelle ultime righe):
alt="descrizione immagine 4" src="UNO/4A.jpg%22">
il nome del file dell'ultima immagine deve essere 4A.jpg.

Controlla e sappimi dire. Caso mai farò un'analisi più approfondita.

Ciao.



ecofive
Inviato: Tuesday, November 25, 2008 7:02:53 PM

Rank: AiutAmico

Iscritto dal : 6/20/2008
Posts: 7,111
Metti le quattro foto nella cartella UNO. Questo è il codice esatto:

<html>
<head>
<meta name="Author" content="Gerard Ferrandez at http://www.dhteumeuleu.com">
<meta http-equiv="imagetoolbar" content="no">
<style type="text/css">
html {
overflow: hidden;
}
body {
margin: 0px;
padding: 0px;
background: #111;
position: absolute;
width: 100%;
height: 100%;
cursor: crosshair;
}
#center {
position:absolute;
left: 50%;
top: 50%;
}
#DHTMLBOOK {
position: relative;
background: #000;
width: 420px;
height: 320px;
left: -360px;
top: -280px;
visibility: hidden;
}
#TXTBOX {
position: absolute;
font-family: verdana;
color: #aba193;
font-size: .8em;
width: 410px;
text-align: center;
top: 320px;
}
.page {
position: absolute;
cursor: pointer;
overflow: hidden;
width: 50%;
height: 100%;
border-left: #000000 solid 1px;
}
.right {
left: 50%;
border-right: #000000 solid 1px;
}
.turn {
background: #000000;
}
.img {
position: absolute;
height: 100%;
width: 200%;
}
</style>

<script type="text/javascript"><!--
// ============================================================
// __| _ | | |
// (_ | -_) | _` | _ \ _ \ _|
// \___|\___| _|\__,_|\___/\___/\__|
// ------------------------------------------------------------
// script: Gerard Ferrandez - Ge-1-doot - August 2oo3
// http://www.dhteumeuleu.com
// ============================================================
// Prelevato, spiegato ed illustrato su http://www.web-link.it
// ============================================================
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>
<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 src="UNO/1A.jpg" >
<img src="UNO/2A.jpg">
<img src="UNO/3A.jpg">
<img src="UNO/4A.jpg">

</div>

</body>
</html>

Per controllare, copia tutto su Blocco Note e poi salvalo come file.html.

Fai doppio clic sul file salvato e provalo. Anche se non ci sono le foto si intuisce l'effetto sfoglia.

Ciao.

Utenti presenti in questo topic
Guest


Salta al Forum
Aggiunta nuovi Topic disabilitata in questo forum.
Risposte disabilitate in questo forum.
Eliminazione tuoi Post disabilitata in questo forum.
Modifica dei tuoi post disabilitata in questo forum.
Creazione Sondaggi disabilitata in questo forum.
Voto ai sondaggi disabilitato in questo forum.

Main Forum RSS : RSS

Aiutamici Theme
Powered by Yet Another Forum.net versione 1.9.1.8 (NET v2.0) - 3/29/2008
Copyright © 2003-2008 Yet Another Forum.net. All rights reserved.