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

Alternare due immagini, automaticamente su pagina sito Opzioni
wubullo
Inviato: Thursday, December 09, 2010 1:35:01 AM

Rank: AiutAmico

Iscritto dal : 12/9/2009
Posts: 345
Eco chiama e il codicifero risponde!

gomezale ha scritto:
Io ce l'ho messa tutta, ma guardando la index off line (mi sto chiedendo se non debba per forza metterla on line per vedere se funziona...), con le modifiche fatte, mi compare un'altra foto dei fenicotteri esattamente sopra alla cornice dove c'e' dentro la foto di sempre...e sta li' ferma, posizionata completamente a sx...


In linea di massima, in questo caso l'anteprima dovrebbe essere fatta online perché lo script - così come l'abbiamo confezionato - pesca le immagini da una cartella che si chiama fotos/. Ma lasciamo da parte per un attimo questo aspetto, che mi preme meno al momento...

Il codice della pagina html che hai riportato nel tuo ultimo post è incompleto; la parte finale manca per brevità o è effettivamente così? In questo secondo caso, occorre fare molti aggiustamenti... Ad ogni modo, il motivo per cui ti compare l'immagine dei fenicotteri due volte è questo (posto solo la parte del codice incriminata):

Commenta:
<table style="width: 900px; height: 680px; text-align: left; margin-left: auto; margin-right: auto;" cellspacing="0">
<tbody>
<img src="fotos/img007.jpg" id="animazione">
<tr>


Nella versione della home che si vede online, l'inserimento dell'immagine avviene più sotto...

gomezale ha scritto:
devo mettere in blocco note anche tutte le descrizioni in italiano...?


Come ha osservato Ecofive, in un file Javascript il testo anticipato dalle doppie barre è un commento, che viene ignorato in fase di caricamento da parte del browser. Puoi toglierlo senza alcuna conseguenza, ma io ti consiglierei di tenerlo: attraverso quelle indicazioni, potrai sempre ricostruire quali operazioni fanno cosa senza dovertele ricordare a memoria.

gomezale ha scritto:
Altra domanda...quando salvo script.js, mi chiede se codifica: ANSI , Unicode ecc... qui cosa seleziono?


In sostanza è indifferente (la codifica ANSI predefinita va bene uguale): un file Javascript non usa nessun charset in particolare.

Vi confermo invece che la dicitura:

Commenta:
<body onload="start('animazione')" style="color: rgb(255, 255, 204); background-color: rgb(255, 255, 255); background-image: url(sfondi/grigio0069.jpg); height: 739px;" alink="#ffffcc" link="#ffffcc" vlink="#ffffcc">


è corretta, perché il cosiddetto "preload Javascript" deve essere eseguito sul <body> della pagina in fase di caricamento; nulla impedisce che, accanto al preload, vengano inserite delle istruzioni CSS inline.

Oltre a questo, posso confermarvi che tutto l'ambaradàn nel mio caso funziona. Ho importato in locale la home del sito e linkato lo script direttamente al file Javascript contenuto nella stessa cartella, così come anche per le immagini.

A questo punto, faccio a Gomezale una proposta: carica online le foto che dovranno effettivamente ruotare nella solita cartella www.fotografandolanatura.net/fotos; modifica poi lo script laddove dice

Commenta:
immagini = new Array();
immagini[0]='fotos/img007.jpg';
immagini[1]='fotos/img002.jpg';


inserendo il nome corretto delle immagini coinvolte (se devi aggiungerne altre, inserisci una nuova riga aumentando sempre di una unità il valore di 'immagini' espresso tra parentesi quadre). Solo a questo punto potrai caricare lo script nella cartella radice del tuo sito (in modo da ottenere http://www.fotografandolanatura.net/script.js). Dopo potremo fare altri test.

Alla fine credo che con una sistemata al codice che hai postato e il caricamento dello script, delle foto e della nuova pagina online il problema si potrà risolvere in un batter d'occhio!

ecofive ha scritto:
gomezale ha scritto:
ps...e' importante che io impari cosi'...mi dicono dalla regia che le foto potrebbero diventare 3 o 4 nel tempo...

e quanto tempo ci metterebbero a scaricarsi? Non tutti hanno la linead ADSL; attenzione al "peso" finale delle immagini.


In realtà, il ciclo creato dallo script non assomma il peso delle immagini: ad ogni fase dell'array, viene caricata una sola immagine alla volta (si tratta sempre di pochi Kb!) e, dopo il primo caricamento, il file viene salvato nella cache del browser. La cosa sarebbe stata effettivamente da tenere d'occhio nel caso si fosse pensato di fare una .gif animata composta - sparo un numero - da sei immagini. Qui invece direi che non c'è da preoccuparsi.

Attendo tue nuove: spero di non essere stato troppo criptico o affrettato...

A presto!
ilrestodiniente
Inviato: Thursday, December 09, 2010 9:15:15 AM

Rank: AiutAmico

Iscritto dal : 4/13/2004
Posts: 1,376
Vi leggo solo adesso e propongo una soluzione che ho usato con soddisfazione:
Inserire tra <head> e </head> il seguente codice:

<style type="text/css">
ul.ppt {
position: relative;
}
.ppt li {
list-style-type: none;
position: absolute;
top: 0;
left: 0;
}
.ppt img {
border: 1px solid #e7e7e7;
padding: 5px;
background-color: #ececec;
}
</style>

poi in <body> e ammesso che le immagini siano nella cartella images inserire:

<ul class="ppt">
<li><img src="images/foto1.jpg" alt="Foto 1"></li>
<li><img src="images/foto2.jpg" alt="Foto2"></li>
</ul>
<script type="text/javascript"
src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript">
$('.ppt li:gt(0)').hide();
$('.ppt li:last').addClass('last');
var cur = $('.ppt li:first');
function animate() {
cur.fadeOut( 1000 );
if ( cur.attr('class') == 'last' )
cur = $('.ppt li:first');
else
cur = cur.next();
cur.fadeIn( 1000 );
}
$(function() {
setInterval( "animate()", 5000 );
} );
</script>

Chiaramente se le immagini sono più di due basta inserire nella lista:

<li><img src="images/foto3.jpg" alt="Foto3"></li>

Spero di essere utile e un caro saluto a tutti
Silvio
ecofive
Inviato: Thursday, December 09, 2010 12:17:23 PM

Rank: AiutAmico

Iscritto dal : 6/20/2008
Posts: 7,111
Funziona benissimo. Come disse Cambronne : - La vecchia guardia muore ma non si arrende -.

Ciao.
gomezale
Inviato: Thursday, December 09, 2010 1:40:05 PM
Rank: AiutAmico

Iscritto dal : 5/26/2009
Posts: 120
Osto quanta roba ragazzi!! Grazie davvero! Grazie anche a te Ilrestodiniente/Silvio. Vista cosi' pare semplice. Sperimentero' anche la tua e poi adotteremo quella che riusciamo a far funzionare nel modo piu' semplice...dato il nostro livello...

Mi metto al lavoro e poi ci si aggiorna ancora!

Per Wubullo: la pagina della mia index era incompleta, ti avevo postato solo la prima parte, quella in cui ero intervenuta...
Te la ripropongo per intero...ti spiace dirmi dove devo mettere quella

<img src="fotos/img007.jpg" id="animazione">

mi sono persa a questo punto...

La seconda foto si chiama img002.jpg.

Interessante davvero tutto cio'...

A presto ragazzi!!!
ecofive
Inviato: Thursday, December 09, 2010 2:51:20 PM

Rank: AiutAmico

Iscritto dal : 6/20/2008
Posts: 7,111
Mi sa che la seconda dovrebbe chiamarsi img008.jpg (a me funziona così), ma penso che sia importante solo l'incremento (il numero tra parentesi quadre ) del codice.
Io metterei <img src="fotos/img007.jpg" id="animazione"> esattamente nel punto dove c'era l'immagine grande nella index.html che hai fatto.
Buon lavoro.

Ciao.
gomezale
Inviato: Thursday, December 09, 2010 3:16:56 PM
Rank: AiutAmico

Iscritto dal : 5/26/2009
Posts: 120
Ecco il tentativo col suggerimento di Silvio! Aiutooooooo! Ma cos'ho io che non vad'oh! ????
Mi mette una cornice attorno alla foto che non mi pare di aver...in piu' non me la sovrappone essatamente all'altra...E mi Signor...comincio a disperare...cioe'...forse sono un caso disperato...
Guardate qui...:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<link rel="shortcut icon"
href="http://fotografandolanatura.net/petti.ico">
<meta content="text/html; charset=ISO-8859-1"
http-equiv="content-type">
<title>FOTOGRAFANDOLANATURA.NET</title>
<style type="text/css">
<!--
a:link {text-decoration: none}
a:visited {text-decoration: none}
a:hover {color: #999999}
-->
</style>
<style type="text/css">
ul.ppt {
position: relative;
}
.ppt li {
list-style-type: none;
position: absolute;
top: 0;
left: 0;
}
.ppt img {
border: 1px solid #e7e7e7;
padding: 5px;
background-color: #ececec;
}
</style>
</head>
<body
style="color: rgb(255, 255, 204); background-color: rgb(255, 255, 255); background-image: url(sfondi/grigio0069.jpg); height: 739px;"
alink="#ffffcc" link="#ffffcc" vlink="#ffffcc">
<div style="text-align: center;"></div>
<table
style="width: 900px; height: 680px; text-align: left; margin-left: auto; margin-right: auto;"
cellspacing="0">
<tbody>
<tr>
<td
style="border-style: ridge ridge none; border-color: rgb(255, 255, 204); border-width: 5px; height: 80px; text-align: left; vertical-align: bottom; width: 900px;"><span
style="font-family: Comic Sans MS;"><span
style="color: rgb(255, 255, 204);"><small
style="color: rgb(255, 255, 51);"><big><br>
</big></small><font size="+2"><span
style="color: rgb(255, 255, 51);"><a href="homepage.html"
target="_blank">&nbsp; &nbsp; &nbsp; &nbsp; </a><a
href="homepage.html" target="_blank">&nbsp;&nbsp;</a><br>
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;
&nbsp;&nbsp;<a href="homepage.html" target="_blank">
Fotografando
la Natura...</a></span></font><br>
</span></span><span
style="font-family: Comic Sans MS;"><span
style="color: rgb(255, 255, 204);"></span></span><span
style="font-family: Comic Sans MS;"><span
style="color: rgb(255, 255, 204);"></span></span><span
style="font-family: Comic Sans MS;"><span
style="color: rgb(255, 255, 204);"></span></span><span
style="font-family: Comic Sans MS;"><span
style="color: rgb(255, 255, 204);"></span></span></td>
</tr>
<tr>
<td
style="border-style: none ridge ridge; border-color: rgb(255, 255, 204); border-width: 0px 5px 5px; text-align: center; height: 565px; vertical-align: top; width: 900px;">
<div style="text-align: center; margin-top: 0px; height: 0px;">&nbsp;
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;
&nbsp; &nbsp; &nbsp; <br>
</div>
<ul class="ppt">
<li><img src="fotos/img007.jpg" alt="Foto1"></li>
<li><img src="fotos/img002.jpg" alt="Foto2"></li>
</ul>
<script type="text/javascript"
src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript">
$('.ppt li:gt(0)').hide();
$('.ppt li:last').addClass('last');
var cur = $('.ppt li:first');
function animate() {
cur.fadeOut( 1000 );
if ( cur.attr('class') == 'last' )
cur = $('.ppt li:first');
else
cur = cur.next();
cur.fadeIn( 1000 );
}
$(function() {
setInterval( "animate()", 5000 );
} );
</script><a href="homepage.html" target="_blank"><img
style="border: 0px solid ; width: 720px; height: 488px;" alt=""
src="fotos/img007.jpg" hspace="90" vspace="0"></a><big><big><small><span
style="font-family: Comic Sans MS;">
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;
&nbsp; &nbsp; &nbsp; &nbsp;
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;
&nbsp; &nbsp; &nbsp; &nbsp;
&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;
&nbsp; &nbsp; &nbsp;&nbsp; &nbsp;2005 © Fenicotteri</span></small></big></big><span
style="font-style: italic; font-family: Comic Sans MS;">
(Phoenicopterus ruber)</span><big><big><small><span
style="font-family: Comic Sans MS;"> al "decollo"</span></small></big></big>
</td>
</tr>
</tbody>
</table>
<div style="text-align: center;">
<table
style="width: 850px; height: 40px; text-align: left; margin-left: auto; margin-right: auto;"
border="0" cellpadding="0" cellspacing="0">
<tbody>
<tr>
<td
style="height: 40px; text-align: center; vertical-align: bottom; width: 850px;"><span
style="color: rgb(255, 255, 51); font-family: Comic Sans MS;"><br>
<big style="font-weight: bold;"><big>Fotografie
Naturalistiche di Animali, Paesaggi</big> <big
style="font-weight: bold;">e Natura in genere</big></big><br>
<big style="font-weight: bold;"><big>Nature
&amp; Wildlife Photography of Animals and Landscapes</big></big><br>
<br>
</span>
<hr style="color: rgb(255, 255, 51); height: 1px; width: 50%;"
noshade="noshade"><span
style="color: rgb(255, 255, 51); font-family: Comic Sans MS;">1997-2010
© OrsoTibetano --- 2009-2010 © www.fotografandolanatura.net</span>
<div class="stats" style="display: none;"><!-- Inizio Codice Shinystat -->
<script type="text/javascript" language="JavaScript"
src="http://codice.shinystat.com/cgi-bin/getcod.cgi?USER=vandercric"></script>
<noscript><a href="http://www.shinystat.com/it"
target="_top">
<img
src="http://www.shinystat.com/cgi-bin/shinystat.cgi?USER=vandercric"
alt="Statistiche" border="0"></a>
</noscript>
<!-- Fine Codice Shinystat -->
</div>
</td>
</tr>
</tbody>
</table>
<span style="color: rgb(255, 255, 51); font-family: Comic Sans MS;"></span></div>
</body>
</html>

RiririGraizie...ciao a tutti!!!
ilrestodiniente
Inviato: Thursday, December 09, 2010 4:22:58 PM

Rank: AiutAmico

Iscritto dal : 4/13/2004
Posts: 1,376
La tua pagina dovrebbe essere così:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<link rel="shortcut icon"
href="http://fotografandolanatura.net/petti.ico">
<meta content="text/html; charset=ISO-8859-1"
http-equiv="content-type">
<title>FOTOGRAFANDOLANATURA.NET</title>
<style type="text/css">
<!--
a:link {text-decoration: none}
a:visited {text-decoration: none}
a:hover {color: #999999}
-->
</style>
<style type="text/css">
ul.ppt {
position: relative;
}
.ppt li {
list-style-type: none;
position: absolute;
top: 0;
left: 0;
}
.ppt img {
padding: 5px;
}
#image {
width: 600px;
height: 400px;
margin-right: auto;
margin-left: auto;
}

</style>
</head>
<body
style="height: 739px; color: rgb(255, 255, 204); background-color: white; background-image: url(sfondi/grigio0069.jpg);"
alink="#ffffcc" link="#ffffcc" vlink="#ffffcc">
<div style="text-align: center;"></div>
<table
style="width: 900px; height: 680px; text-align: left; margin-left: auto; margin-right: auto;"
cellspacing="0">
<tbody>
<tr>
<td
style="border-style: ridge ridge none; border-color: rgb(255, 255, 204); border-width: 5px; height: 80px; text-align: left; vertical-align: bottom; width: 900px;"><span
style="font-family: Comic Sans MS;"><span
style="color: rgb(255, 255, 204);"><small
style="color: rgb(255, 255, 51);"><big><br>
</big></small><font size="+2"><span
style="color: rgb(255, 255, 51);"><a href="homepage.html"
target="_blank">&nbsp; &nbsp; &nbsp; &nbsp; </a><a
href="homepage.html" target="_blank">&nbsp;&nbsp;</a><br>
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;
&nbsp;&nbsp;<a href="homepage.html" target="_blank">
Fotografando
la Natura...</a></span></font><br>
</span></span><span
style="font-family: Comic Sans MS;"><span
style="color: rgb(255, 255, 204);"></span></span><span
style="font-family: Comic Sans MS;"><span
style="color: rgb(255, 255, 204);"></span></span><span
style="font-family: Comic Sans MS;"><span
style="color: rgb(255, 255, 204);"></span></span><span
style="font-family: Comic Sans MS;"><span
style="color: rgb(255, 255, 204);"></span></span></td>
</tr>
<tr>
<td
style="border-style: none ridge ridge; border-color: rgb(255, 255, 204); border-width: 0px 5px 5px; text-align: center; height: 565px; vertical-align: top; width: 900px;">
<div style="text-align: center; margin-top: 0px; height: 0px;">&nbsp;
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;
&nbsp; &nbsp; &nbsp; <br>
</div>
<div id="image">
<ul class="ppt">
<li><img src="fotos/img007.jpg" alt="Foto1"></li>
<li><img src="fotos/img002.jpg" alt="Foto2"></li>
</ul>
<script type="text/javascript"
src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript">
$('.ppt li:gt(0)').hide();
$('.ppt li:last').addClass('last');
var cur = $('.ppt li:first');
function animate() {
cur.fadeOut( 1000 );
if ( cur.attr('class') == 'last' )
cur = $('.ppt li:first');
else
cur = cur.next();
cur.fadeIn( 1000 );
}
$(function() {
setInterval( "animate()", 5000 );
} ); </script></div>
<br>
<big><big><small><span
style="font-family: Comic Sans MS;">&nbsp; &nbsp;
&nbsp; &nbsp; &nbsp; &nbsp;
&nbsp; &nbsp; &nbsp; &nbsp;
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;
&nbsp; &nbsp; &nbsp; &nbsp;
&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;
&nbsp; &nbsp; &nbsp;&nbsp; &nbsp;2005 © Fenicotteri</span></small></big></big><span
style="font-style: italic; font-family: Comic Sans MS;">
(Phoenicopterus ruber)</span><big><big><small><span
style="font-family: Comic Sans MS;"> al "decollo"</span></small></big></big>
</td>
</tr>
</tbody>
</table>
<div style="text-align: center;">
<table
style="width: 850px; height: 40px; text-align: left; margin-left: auto; margin-right: auto;"
border="0" cellpadding="0" cellspacing="0">
<tbody>
<tr>
<td
style="height: 40px; text-align: center; vertical-align: bottom; width: 850px;"><span
style="color: rgb(255, 255, 51); font-family: Comic Sans MS;"><br>
<big style="font-weight: bold;"><big>Fotografie
Naturalistiche di Animali, Paesaggi</big> <big
style="font-weight: bold;">e Natura in genere</big></big><br>
<big style="font-weight: bold;"><big>Nature
&amp; Wildlife Photography of Animals and Landscapes</big></big><br>
<br>
</span>
<hr style="color: rgb(255, 255, 51); height: 1px; width: 50%;"
noshade="noshade"><span
style="color: rgb(255, 255, 51); font-family: Comic Sans MS;">1997-2010
© OrsoTibetano --- 2009-2010 © www.fotografandolanatura.net</span>
<div class="stats" style="display: none;"><!-- Inizio Codice Shinystat -->
<script type="text/javascript" language="JavaScript"
src="http://codice.shinystat.com/cgi-bin/getcod.cgi?USER=vandercric"></script>
<noscript><a href="http://www.shinystat.com/it"
target="_top">
<img
src="http://www.shinystat.com/cgi-bin/shinystat.cgi?USER=vandercric"
alt="Statistiche" border="0"></a>
</noscript>
<!-- Fine Codice Shinystat -->
</div>
</td>
</tr>
</tbody>
</table>
<span style="color: rgb(255, 255, 51); font-family: Comic Sans MS;"></span></div>
</body>
</html>

In effetti ho inserito tutto lo script in un nuovo div di nome #image (segnato in verde e attento a non omettere la chiusura </div> sempre in verde) e l'ho centrato nella cella come da regola css segnata in rosso tra <head> e </head>. Ho aggiunto anche un <br> segnato in blu per distanziare leggermente le foto e la scitta.
La regola del css in rosso prevede che le immagini siano di 600x400 o minori se hai immagini più grandi regola le misure del div su quelle della immagina più grande variando i valori width e height.

Speriamo bene
ciao
ecofive
Inviato: Thursday, December 09, 2010 8:17:25 PM

Rank: AiutAmico

Iscritto dal : 6/20/2008
Posts: 7,111
Collaudato. Funziona alla perfezione !! Applause Applause Applause

Ciao.

Edit: oggi, venerdì, ho trovato un altro javascript che svolge un lavoro analogo.


gomezale
Inviato: Friday, December 10, 2010 5:38:37 PM
Rank: AiutAmico

Iscritto dal : 5/26/2009
Posts: 120
Prova con correzioni di Silvio, guardate un po'...

http://www.fotografandolanatura.net/indexprova1.html

Per le foto cominciamo ad esserci, ma c'e' quella sotto in piu'...e non e' centrato...

Qualcuno rilancia l'aiuto???

Grazie!!
gomezale
Inviato: Friday, December 10, 2010 6:22:23 PM
Rank: AiutAmico

Iscritto dal : 5/26/2009
Posts: 120
Questa e' la prova col metodo Wubullo!

http://www.fotografandolanatura.net/indexprova.html

Perfetto direi...sono riuscita a lasciare anche le foto linkabili! Unico piccolissimo neo da perfezionista...sullo stile di cambio foto, questo le intercambia in modo secco se notate, quasi uno scatto.
Nello script di Silvio, avviene quasi con lieve dissolvenza... Ovviamente non e' questione di vita o di morte...pero' mi sarebbe piaciuto cosi'.
Magari si puo' far qualcosa... E rendere linkabili le foto anche nella soluzione di Silvio. Prima di tutto pero' vorrei centrare le foto...

Io continuo a sbisigarci...se mi aiutate vediamo se ne veniamo a capo...

Grazie a tutti ragazzi! Grazie Eco...l'ultima correzione proposta come vedi ha funzionato.
A presto!
ilrestodiniente
Inviato: Friday, December 10, 2010 6:41:00 PM

Rank: AiutAmico

Iscritto dal : 4/13/2004
Posts: 1,376
Certo che si può fare:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<link rel="shortcut icon"
href="http://fotografandolanatura.net/petti.ico">
<meta content="text/html; charset=ISO-8859-1"
http-equiv="content-type">
<title>FOTOGRAFANDOLANATURA.NET</title>
<style type="text/css">
<!--
a:link {text-decoration: none}
a:visited {text-decoration: none}
a:hover {color: #999999}
-->
</style>
<style type="text/css">
ul.ppt {
position: relative;
}
.ppt li {
list-style-type: none;
position: absolute;
top: 0;
left: 0;
}
.ppt img {
padding: 5px;
}
#image {
width: 600px;
height: 400px;
margin-right: auto;
margin-left: auto;
}
</style>
</head>
<body
style="height: 739px; color: rgb(255, 255, 204); background-color: white; background-image: url(sfondi/grigio0069.jpg);"
alink="#ffffcc" link="#ffffcc" vlink="#ffffcc">
<div style="text-align: center;"><a href="#">prova</a></div>
<table
style="width: 900px; height: 680px; text-align: left; margin-left: auto; margin-right: auto;"
cellspacing="0">
<tbody>
<tr>
<td
style="border-style: ridge ridge none; border-color: rgb(255, 255, 204); border-width: 5px; height: 80px; text-align: left; vertical-align: bottom; width: 900px;"><span
style="font-family: Comic Sans MS;"><span
style="color: rgb(255, 255, 204);"><small
style="color: rgb(255, 255, 51);"><big><br>
</big></small><font size="+2"><span
style="color: rgb(255, 255, 51);"><a href="homepage.html"
target="_blank">&nbsp; &nbsp; &nbsp; &nbsp; </a><a
href="homepage.html" target="_blank">&nbsp;&nbsp;</a><br>
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;
&nbsp;&nbsp;<a href="homepage.html" target="_blank">
Fotografando
la Natura...</a></span></font><br>
</span></span><span
style="font-family: Comic Sans MS;"><span
style="color: rgb(255, 255, 204);"></span></span><span
style="font-family: Comic Sans MS;"><span
style="color: rgb(255, 255, 204);"></span></span><span
style="font-family: Comic Sans MS;"><span
style="color: rgb(255, 255, 204);"></span></span><span
style="font-family: Comic Sans MS;"><span
style="color: rgb(255, 255, 204);"></span></span></td>
</tr>
<tr>
<td
style="border-style: none ridge ridge; border-color: rgb(255, 255, 204); border-width: 0px 5px 5px; text-align: center; height: 565px; vertical-align: top; width: 900px;">
<div style="text-align: center; margin-top: 0px; height: 0px;">&nbsp;
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;
&nbsp; &nbsp; &nbsp; <br>
</div>
<div id="image">
<ul class="ppt">
<li><a href="#"><img src="fotos/img007.jpg" alt="Foto1"></a></li>
<li><a href="#"><img src="fotos/img002.jpg" alt="Foto2"></a></li>
</ul>
<script type="text/javascript"
src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript">
$('.ppt li:gt(0)').hide();
$('.ppt li:last').addClass('last');
var cur = $('.ppt li:first');
function animate() {
cur.fadeOut( 1000 );
if ( cur.attr('class') == 'last' )
cur = $('.ppt li:first');
else
cur = cur.next();
cur.fadeIn( 1000 );
}
$(function() {
setInterval( "animate()", 5000 );
} ); </script></div>
<br>
<big><big><small><span
style="font-family: Comic Sans MS;">&nbsp; &nbsp;
&nbsp; &nbsp; &nbsp; &nbsp;
&nbsp; &nbsp; &nbsp; &nbsp;
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;
&nbsp; &nbsp; &nbsp; &nbsp;
&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;
&nbsp; &nbsp; &nbsp;&nbsp; &nbsp;2005 © Fenicotteri</span></small></big></big><span
style="font-style: italic; font-family: Comic Sans MS;">
(Phoenicopterus ruber)</span><big><big><small><span
style="font-family: Comic Sans MS;"> al "decollo"</span></small></big></big>
</td>
</tr>
</tbody>
</table>
<div style="text-align: center;">
<table
style="width: 850px; height: 40px; text-align: left; margin-left: auto; margin-right: auto;"
border="0" cellpadding="0" cellspacing="0">
<tbody>
<tr>
<td
style="height: 40px; text-align: center; vertical-align: bottom; width: 850px;"><span
style="color: rgb(255, 255, 51); font-family: Comic Sans MS;"><br>
<big style="font-weight: bold;"><big>Fotografie
Naturalistiche di Animali, Paesaggi</big> <big
style="font-weight: bold;">e Natura in genere</big></big><br>
<big style="font-weight: bold;"><big>Nature
&amp; Wildlife Photography of Animals and Landscapes</big></big><br>
<br>
</span>
<hr style="color: rgb(255, 255, 51); height: 1px; width: 50%;"
noshade="noshade"><span
style="color: rgb(255, 255, 51); font-family: Comic Sans MS;">1997-2010
© OrsoTibetano --- 2009-2010 © www.fotografandolanatura.net</span>
<div class="stats" style="display: none;"><!-- Inizio Codice Shinystat -->
<script type="text/javascript" language="JavaScript"
src="http://codice.shinystat.com/cgi-bin/getcod.cgi?USER=vandercric"></script>
<noscript><a href="http://www.shinystat.com/it"
target="_top">
<img
src="http://www.shinystat.com/cgi-bin/shinystat.cgi?USER=vandercric"
alt="Statistiche" border="0"></a>
</noscript>
<!-- Fine Codice Shinystat -->
</div>
</td>
</tr>
</tbody>
</table>
<span style="color: rgb(255, 255, 51); font-family: Comic Sans MS;"></span></div>
</body>
</html>

Per linkare le foto bisogna aggiungere le parti che ti ho segnato in rosso, mettendo al posto del # il link di destinazione (la pagina o l'url).
Per settare i tempi di dissolvenza in entrata e in uscita devi settare le parti in verde, aumentando il valore 1000 ad esempio a 2000 l'effetto dissolvenza avviene nel doppio del tempo.
Per settare l'intervallo di tempo tra due dissolvenze devi modificare il valore in blu.
Speriamo bene e in bocca al lupo
Silvio
ilrestodiniente
Inviato: Friday, December 10, 2010 6:50:57 PM

Rank: AiutAmico

Iscritto dal : 4/13/2004
Posts: 1,376
Per l'allineamento hai mancato di inserire tra i tag <head> e </head> la seguente regola css:

#image {
width: 600px;
height: 400px;
margin-right: auto;
margin-left: auto;
}

è questa che centra il div immagine
ecofive
Inviato: Friday, December 10, 2010 7:30:14 PM

Rank: AiutAmico

Iscritto dal : 6/20/2008
Posts: 7,111
O.T.
"Io continuo a sbisigarci..."
Sbaglio o hai usato sbisigar per armeggiare ?
E' un etimo dialettale tipico del Nord - Est.

Ciao.
gomezale
Inviato: Friday, December 10, 2010 9:34:32 PM
Rank: AiutAmico

Iscritto dal : 5/26/2009
Posts: 120
Fantastico Ragazzi! Pian piano ce la posso fare...non stasera perche' son troppo cotta...ma domani mi ci rimetto all'opera!

Silvio, intanto ti giro subito la prima "obiezione"...io l'ho aggiunto quello che mi avevi detto per centrare, se guardi c'e', te lo riporto qui come copia incolla di quello che hai postato tu. Rimane solo che l'abbia messo fuori posto..

Certo che si può fare:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<link rel="shortcut icon"
href="http://fotografandolanatura.net/petti.ico">
<meta content="text/html; charset=ISO-8859-1"
http-equiv="content-type">
<title>FOTOGRAFANDOLANATURA.NET</title>
<style type="text/css">
<!--
a:link {text-decoration: none}
a:visited {text-decoration: none}
a:hover {color: #999999}
-->
</style>
<style type="text/css">
ul.ppt {
position: relative;
}
.ppt li {
list-style-type: none;
position: absolute;
top: 0;
left: 0;
}
.ppt img {
padding: 5px;
}
#image {
width: 600px;
height: 400px;
margin-right: auto;
margin-left: auto;
}
</style>
</head>
<body
style="height: 739px; color: rgb(255, 255, 204); background-color: white; background-image: url(sfondi/grigio0069.jpg);"
alink="#ffffcc" link="#ffffcc" vlink="#ffffcc">
<div style="text-align: center;"><a href="#">prova</a></div>
.....

Spero tanto ci sia una spiegazione logica al fatto che non funzioni...mi dispiacerebbe troppo, perche' siamo proprio vicini alla soluzione!

Sempre sempre GRAZIEEEEEEEEE!

Ciao!

p.s per Eco: osto! Non lo sapevo che sbisigare fosse vostro! Il significato e' proprio quello! Io lo traduco direttamente dal dialetto che ho sempre sentito in casa, che recita "sa sbisigat??? " (scritto come si pronuncia, non ho la piu' pallida idea di come si scriva...) cioe' "cosa traffichi? o cosa armeggi? " come dicevi tu.. Pensa te quanta ne imparo!!! Ciao!!
ecofive
Inviato: Friday, December 10, 2010 9:45:17 PM

Rank: AiutAmico

Iscritto dal : 6/20/2008
Posts: 7,111
Subito una cosa:
#image {
width: 600px;
height: 400px;
margin-right: auto;
margin-left: auto;
}
</style>

Metti la parentesi graffa e </style> su due righe diverse, come nel codice di Silvio.

Attenzione ad inserire bene anche questa parte di codice:
<div id="image">
<ul class="ppt">
<li><a href="#"><img src="fotos/img007.jpg" alt="Foto1"></a></li>
<li><a href="#"><img src="fotos/img002.jpg" alt="Foto2"></a></li>
</ul>
ecc.

Era meglio se mandavi un link alla pagina di prova.
Buon "sbisigamento".

Ciao.
gomezale
Inviato: Friday, December 10, 2010 10:06:22 PM
Rank: AiutAmico

Iscritto dal : 5/26/2009
Posts: 120
GRAZIE ECOFIVE!!!!

Ho in piedi...o quasi...due pagine di prova, una col sistema wubullo e l'atra col metodo Silvio. Le ho linkate nei miei post subito prima dell'ultima integrazione di Silvio.

Rieccole cmq:
http://www.fotografandolanatura.net/indexprova.html


http://www.fotografandolanatura.net/indexprova1.html

Ci aggiorniamo presto!!! Ciao
epipactis
Inviato: Friday, December 10, 2010 10:34:28 PM
Rank: AiutAmico

Iscritto dal : 3/11/2009
Posts: 2,276
Sotto le due immagini che si alternano, resta la scritta "fenicotteri in volo" anche quando c'è la marmotta. Eventualmente si potrebbero incorporare le due diverse didascalie nelle immagini stesse, per non avere troppe complicazioni (altrimenti bisognerebbe trovare il modo di alternare anche le didascalie).
ilrestodiniente
Inviato: Saturday, December 11, 2010 9:18:38 AM

Rank: AiutAmico

Iscritto dal : 4/13/2004
Posts: 1,376
Nella pagina della mia soluzione ci sono due errori.
Il primo è:

<div id="image"
style="text-align: center; margin-top: 0px; height: 0px;">

la parte rossa non so come ci sia capitata e va tolta, deve rimanere

<div id="image">

e poi scusa ribadisco (sarà l'età) di non vedere tra <head> e </head> la regola css del div image

#image {
width: 600px;
height: 400px;
margin-right: auto;
margin-left: auto;
}

Piccolo consiglio non aggiungere niente alla tua pagina (correggere è spesso più difficile che creare) ma apri un nuovo documento nella vista sorgente cancella tutto e incolla pari pari questo:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<link rel="shortcut icon"
href="http://fotografandolanatura.net/petti.ico">
<meta content="text/html; charset=ISO-8859-1"
http-equiv="content-type">
<title>FOTOGRAFANDOLANATURA.NET</title>
<style type="text/css">
<!--
a:link {text-decoration: none}
a:visited {text-decoration: none}
a:hover {color: #999999}
-->
</style>
<style type="text/css">
ul.ppt {
position: relative;
}
.ppt li {
list-style-type: none;
position: absolute;
top: 0;
left: 0;
}
.ppt img {
padding: 5px;
}
#image {
width: 600px;
height: 400px;
margin-right: auto;
margin-left: auto;
}
</style>
</head>
<body
style="height: 739px; color: rgb(255, 255, 204); background-color: white; background-image: url(sfondi/grigio0069.jpg);"
alink="#ffffcc" link="#ffffcc" vlink="#ffffcc">
<div style="text-align: center;"><a href="#">prova</a></div>
<table
style="width: 900px; height: 680px; text-align: left; margin-left: auto; margin-right: auto;"
cellspacing="0">
<tbody>
<tr>
<td
style="border-style: ridge ridge none; border-color: rgb(255, 255, 204); border-width: 5px; height: 80px; text-align: left; vertical-align: bottom; width: 900px;"><span
style="font-family: Comic Sans MS;"><span
style="color: rgb(255, 255, 204);"><small
style="color: rgb(255, 255, 51);"><big><br>
</big></small><font size="+2"><span
style="color: rgb(255, 255, 51);"><a href="homepage.html"
target="_blank">&nbsp; &nbsp; &nbsp; &nbsp; </a><a
href="homepage.html" target="_blank">&nbsp;&nbsp;</a><br>
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;
&nbsp;&nbsp;<a href="homepage.html" target="_blank">
Fotografando
la Natura...</a></span></font><br>
</span></span><span
style="font-family: Comic Sans MS;"><span
style="color: rgb(255, 255, 204);"></span></span><span
style="font-family: Comic Sans MS;"><span
style="color: rgb(255, 255, 204);"></span></span><span
style="font-family: Comic Sans MS;"><span
style="color: rgb(255, 255, 204);"></span></span><span
style="font-family: Comic Sans MS;"><span
style="color: rgb(255, 255, 204);"></span></span></td>
</tr>
<tr>
<td
style="border-style: none ridge ridge; border-color: rgb(255, 255, 204); border-width: 0px 5px 5px; text-align: center; height: 565px; vertical-align: top; width: 900px;">
<div style="text-align: center; margin-top: 0px; height: 0px;">&nbsp;
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;
&nbsp; &nbsp; &nbsp; <br>
</div>
<div id="image">
<ul class="ppt">
<li><a href="#"><img
src="fotos/img007.jpg" alt="Foto1"></a></li>
<li><a href="#"><img
src="fotos/img002.jpg" alt="Foto2"></a></li>
</ul>
<script type="text/javascript"
src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript">
$('.ppt li:gt(0)').hide();
$('.ppt li:last').addClass('last');
var cur = $('.ppt li:first');
function animate() {
cur.fadeOut( 3000 );
if ( cur.attr('class') == 'last' )
cur = $('.ppt li:first');
else
cur = cur.next();
cur.fadeIn( 3000 );
}
$(function() {
setInterval( "animate()", 5000 );
} ); </script></div>
<br>
<big><big><small><span
style="font-family: Comic Sans MS;">&nbsp; &nbsp;
&nbsp; &nbsp; &nbsp; &nbsp;
&nbsp; &nbsp; &nbsp; &nbsp;
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;
&nbsp; &nbsp; &nbsp; &nbsp;
&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;
&nbsp; &nbsp; &nbsp;&nbsp; &nbsp;2005 © Fenicotteri</span></small></big></big><span
style="font-style: italic; font-family: Comic Sans MS;">
(Phoenicopterus ruber)</span><big><big><small><span
style="font-family: Comic Sans MS;"> al "decollo"</span></small></big></big>
</td>
</tr>
</tbody>
</table>
<div style="text-align: center;">
<table
style="width: 850px; height: 40px; text-align: left; margin-left: auto; margin-right: auto;"
border="0" cellpadding="0" cellspacing="0">
<tbody>
<tr>
<td
style="height: 40px; text-align: center; vertical-align: bottom; width: 850px;"><span
style="color: rgb(255, 255, 51); font-family: Comic Sans MS;"><br>
<big style="font-weight: bold;"><big>Fotografie
Naturalistiche di Animali, Paesaggi</big> <big
style="font-weight: bold;">e Natura in genere</big></big><br>
<big style="font-weight: bold;"><big>Nature
&amp; Wildlife Photography of Animals and Landscapes</big></big><br>
<br>
</span>
<hr style="color: rgb(255, 255, 51); height: 1px; width: 50%;"
noshade="noshade"><span
style="color: rgb(255, 255, 51); font-family: Comic Sans MS;">1997-2010
© OrsoTibetano --- 2009-2010 © www.fotografandolanatura.net</span>
<div class="stats" style="display: none;"><!-- Inizio Codice Shinystat -->
<script type="text/javascript" language="JavaScript"
src="http://codice.shinystat.com/cgi-bin/getcod.cgi?USER=vandercric"></script>
<noscript><a href="http://www.shinystat.com/it"
target="_top">
<img
src="http://www.shinystat.com/cgi-bin/shinystat.cgi?USER=vandercric"
alt="Statistiche" border="0"></a>
</noscript>
<!-- Fine Codice Shinystat -->
</div>
</td>
</tr>
</tbody>
</table>
<span style="color: rgb(255, 255, 51); font-family: Comic Sans MS;"></span></div>
</body>
</html>

provato e riprovato funziona perfettamente. (ti ho anche aumentato i tempi di dissolvenza).

Per quanto concerne le didascalie sotto le foto devi necessariamente inserirle con un programma grafico nelle foto stesse, altrimenti bisogna ricorrere ad un altro tipo di slide ma le cose si complicherebbero. Ad ogni buon conto comincia a fare funzionare questo e, se proprio non ti sta bene, potremmo ricorrere ad altra soluzione.
Ciao

gomezale
Inviato: Saturday, December 11, 2010 6:09:32 PM
Rank: AiutAmico

Iscritto dal : 5/26/2009
Posts: 120
Stavo appunto pensando Anxious ...piu' di cosi'...mi fate direttamente la pagina e siamo tutti liberiApplause !!! Scherzo...Beh...ci siamo arrivati invece...

Grazie Silvio. Faro' cosi'. Troppo gentile da parte tua... Comunque nel mio penultimo post dove ti risegnalavo che non mi si centrava neppure inserendo quel codice che mi indicavi, se ci guardi ti avevo evidenziato in rosso il punto in cui lo avevo inserito nella pagina html, proprio per farti vedere che c'era.
Comunque a questo punto non e' piu' un problema! Ora non mi resta che provare, sbisighero' un po' ma ce la devo fare per forza!

Grazie per esservi "preoccupati" anche per la didascalia...avevamo gia' meditato di inserirla direttamente sulle foto, proprio perche' temevo un'ulteriore bega per me troppo difficile da gestire...

Benissimo!!!!!!!!!!!!!!!!!!

Ora si va! So gia' che devo caricare almeno una terza foto. Ora vado a creare la pagina giusta, poi appena sono pronta con anche le foto definitive...vi posto il risultato del grande lavoro che mi avete permesso di fare, ancora una volta!!

Un saluto a tutti...per ora! Siete stati carinissimi!

Ciao!
ecofive
Inviato: Saturday, December 11, 2010 6:43:00 PM

Rank: AiutAmico

Iscritto dal : 6/20/2008
Posts: 7,111
Aggiungere una o più foto non dovrebbe essere un problema; basta un copia e incolla:
<li><a href="#"><img src="fotos/img007.jpg" alt="Foto1"></a></li>
<li><a href="#"><img src="fotos/img002.jpg" alt="Foto2"></a></li>
<li><a href="#"><img src="fotos/img003.jpg" alt="Foto2"></a></li>

Quando copi e incolli i codici che ti dà Silvio, una volta salvato il file ricontrolla che tutto corrisponda all' ... originale.
Buon lavoro.

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.