Cambio immagine random

[ocir]

Ciao a tutti. Sto cercando di farmi un sito nonostante le mia ignoranza html. Volevo che nella home ci fosse un'immagine grande che cambiasse. Ho trovato questo codice:

da inserire in head

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

Da inserire in body:

<ul class="ppt">
<li><img src="images/foto1.jpg" alt="Foto 1"></li>
<li><img src="images/foto2.jpg" alt="Foto 2"></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>

Funziona bene e ho caricato una quarantina di immagini. Mi piacerebbe, però, che:
- l'immagine di inizio non fosse sempre la stessa;
- anzichè cambiare dopo X millisecondi cambiasse solo al refresh della pagina o ogni volta che si torna sulla home.
Mi appello a qualche buona anima
grazie

[Vincent.Zeno]

ciao e benvenuto,

per fare quello che hai esposto hai sbagliato approccio, prova partire da qui

<script language="JavaScript">
img = new Array()
ran = Math.floor(4 * Math.random());
img[0] = 'immagine1.jpg';
img[1] = 'immagine2.jpg';
img[2] = 'immagine3.gif';
img[3] = 'immagine4.jpg';
document.write("<img src=\""+img[ran]+"\">");
</script>

in alternativa in rete (cercando javascript immagine casuale) trovi esempi di vario genere

[ocir]

ciao e benvenuto,

per fare quello che hai esposto hai sbagliato approccio, prova partire da qui

<script language="JavaScript">
img = new Array()
ran = Math.floor(4 * Math.random());
img[0] = 'immagine1.jpg';
img[1] = 'immagine2.jpg';
img[2] = 'immagine3.gif';
img[3] = 'immagine4.jpg';
document.write("<img src=\""+img[ran]+"\">");
</script>

in alternativa in rete (cercando javascript immagine casuale) trovi esempi di vario genere

Grazie molte, come faccio ad aggiungere gli attributi width e height alle immagini?

[ocir]

mi spiego meglio: lo script funziona benissimo e ti ringrazio. Solo che quando entro in home page per una frazione di secondo vedo il piè di pagina (footer) in alto.
Io avevo pensato di dargli una dimensione alle immagini (width e height) per evitare quell'effetto spiacevole. Magari sbaglio.
Oppure potrebbe essere un problema di precaricamento? E se si, quali righe (e dove) devo inserire?
Grazie

[Vincent.Zeno]

si... mancando l'immagine finché non sono state caricate puoi ottenere quell'inconveniente.

potresti mettere lo script in un contenitore con le dimensioni che ti interessano

[ocir]

Cosa significa "contenitore"?

Ho trovato questo sul web. posso inserirlo prima o dopo dell'altro script?

<script type="text/javascript">
<!--//--><=!=[=C=D=A=T=A=[//><!--
var images = new Array()
function preload() {
for (i = 0; i < preload.arguments.length; i++) {
images[i] = new Image()
images[i].src = preload.arguments[i]
}
}
preload(
"imma1.jpg",
"imma2.jpg",
"imma3.jpg",
"imma4.jpg"
)
//--><!]=]=>
</script>

[Vincent.Zeno]

il PRE-load lo fai prima

un contenitore... ovvero un div

[ocir]

grazie, ci provo!
se rinasco studio l'html da bambino!

[ocir]

Ho provato così ma non carica cioè mi compare l'icona spezzata
Dove sbaglio?

<div><script type="text/javascript">// <=!=[=C=D=A=T=A=[
//--><=!=[=C=D=A=T=A=[//><!--
var images = new Array()
function preload() {
for (i = 0; i < preload.arguments.length; i++) {
images[i] = new Image()
images[i].src = preload.arguments[i]
}
}
preload(
"http://www.................../1.jpg",
"http://www.................../2.jpg",
"http://www.................../3.jpg",
"http://www.................../4.jpg"
)
//--><!
// ]=]=></script></div>
<script type="text/javascript" language="JavaScript">// <=!=[=C=D=A=T=A=[
img = new Array()
ran = Math.floor(4 * Math.random());
img[0] = 'www.................../1.jpg';
img[1] = 'www.................../2.jpg';
img[2] = 'www.................../3.jpg';
img[3] = 'www.................../4.jpg';
document.write("<img src=\""+img[ran]+"\">");
// ]=]=></script>

[Vincent.Zeno]

dipende dal contesto...
occhio al percorso delle immagini

<script type="text/javascript">
var images = new Array()
function preload() {
for (i = 0; i < preload.arguments.length; i++) {
images[i] = new Image()
images[i].src = preload.arguments[i]
}
}
preload(
"sotto-cartella-se-ce/1.jpg",
"sotto-cartella-se-ce/2.jpg",
"sotto-cartella-se-ce/3.jpg",
"sotto-cartella-se-ce/4.jpg"
)
</script>
<div style="width: xxx; height: zzz;">
<script type="text/javascript" language="JavaScript">
img = new Array()
ran = Math.floor(4 * Math.random());
img[0] = 'sotto-cartella-se-ce/1.jpg';
img[1] = 'sotto-cartella-se-ce/2.jpg';
img[2] = 'sotto-cartella-se-ce/3.jpg';
img[3] = 'sotto-cartella-se-ce/4.jpg';
document.write("<img src=\""+img[ran]+"\">");
</script></div>

stabilisci le dimensioni del div contenitore uguale alle immagini, così non hai "quel problema là"


EDIT: ricorda di usare sempre il tag CODE per postare codice sul forum, grazie
(vedi tasto # in modalità avanzata)