Cambiare Background-Image al caricamento della pagina

salve a tutti,
vorrei provare a cambiare in maniera dinamica un'immagine di background
specificata in un css. per accedere alla proprietà utilizzo
document.getElementById('head').style.backgroundIm age ma quando
all'evento onload faccio
document.getElementById('head').style.backgroundIm age = url(immagine) al
caricamento non avviene niente. immagine è una variabile così composta
var immagine = "url(img/0" + num + ".jpg)" e num è un numero casuale. se
a schermo scrivo il contenuto di immagine ottengo quello che voglio
esattamente, ma non so perché, quando è dentro
document.getElementById('head').style.backgroundIm age = url(immagine)
non ottengo l'effetto desiderato. qualcuno ha qualche suggerimento?
grazie in anticipo per l'attenzione

On Wed, 13 Feb 2008 13:30:49 GMT, Avatar - QUELLO VERO VERO - wrote:

salve a tutti,
vorrei provare a cambiare in maniera dinamica un'immagine di background
specificata in un css. per accedere alla proprietà utilizzo
document.getElementById('head').style.backgroundIm age

Hai un elemento chiamato con id "head"? Potresti confonderlo con
l'omonimo tag, ti conviene magari rinominarlo in "header".

ma quando
all'evento onload faccio

Puoi anche non aspettare l'onload se vuoi, basta che i CSS siano
caricati nell'head (il tag).

document.getElementById('head').style.backgroundIm age = url(immagine) al
caricamento non avviene niente.
immagine è una variabile così composta
var immagine = "url(img/0" + num + ".jpg)" e num è un numero casuale.

Allora sarà:

document.getElementById("head").style.backgroundIm age = immagine;

non ottengo l'effetto desiderato. qualcuno ha qualche suggerimento?

Se continua a darti problemi, prova a stampare sia immagine, sia
ciò che hai messo in background:

var st = document.getElementById("head").style;

st.backgroundImage = immagine;

alert( "var: "+immagine+
"\r\nbg: "+st.background+
"\r\nbg img:"+st.backgroundImage );

E vedi un po' se torna tutto.

grazie in anticipo per l'attenzione

Di niente.

--
~ "Io ho fatto questo, dice la mia memoria
Io non posso aver fatto questo, dice il mio orgoglio.
Alla fine, è la memoria ad arrendersi." (Nietzsche)

Innanzi tutto grazie per i suggerimenti.
dunque, questo è quello che ho messo, dopo i tuoi suggerimenti, nel tag
head:
<link rel="stylesheet" type="text/css" href="fogliostile.css" media="all" />
<script type="text/javascript">
//<![CDATA[

// Aggiungi qui le altre immagini ....
var num = Math.floor(Math.random() * number);

var immagine = "url(img/0" + num + ".jpg)";

document.getElementById("header").style.background Image = immagine;

var st = document.getElementById("head").style;

st.backgroundImage = immagine;

alert( "var: "+immagine+
"\r\nbg: "+st.background+
"\r\nbg img:"+st.backgroundImage );
//]]>
</script>

non ottengo l'effetto desiderato e anche l'alert non mi viene
visto...utilizzo firefox ma anche con ie7 non succede niente...
davvero non so dove sbaglio...
grazie ancora

On Wed, 13 Feb 2008 15:35:04 GMT, Avatar - QUELLO VERO VERO - wrote:

link rel="stylesheet" type="text/css" href="fogliostile.css" media="all" /

document.getElementById("header").style.background Image = immagine;

var st = document.getElementById("head").style;

Qui hai lasciato "head", comunque. Dovresti cambiare l'id anche qua.

Ma ti faccio una domanda: di che elemento, nello specifico, desideri
cambiare background? Qual'è il suo codice HTML?

non ottengo l'effetto desiderato e anche l'alert non mi viene
visto...

Sicuramente perché hai fatto confusione con gli ID, quindi ti genera
un errore.

utilizzo firefox ma anche con ie7 non succede niente...

Qualcosa succede di sicuro, se guardi l'Error Console di Firefox, ci
sarà di certo una qualche notifica d'errore.

grazie ancora

De nada, e tranquillo che pian piano risolviamo il problema.

--
~ "E' uno sterminio.. Non è una guerra più di quanto lo potrebbe
essere tra un uomo e un verme... O tra draghi e lupi..
O tra uomini a cavallo di draghi che lanciano lupi ai vermi!"

ZER0 ha scritto:

On Wed, 13 Feb 2008 15:35:04 GMT, Avatar - QUELLO VERO VERO - wrote:

link rel="stylesheet" type="text/css" href="fogliostile.css" media="all" /

document.getElementById("header").style.background Image = immagine;

var st = document.getElementById("head").style;

Qui hai lasciato "head", comunque. Dovresti cambiare l'id anche qua.

si si, ho sbagliato a trascrivere qui, ma era corretto nel codice

Ma ti faccio una domanda: di che elemento, nello specifico, desideri
cambiare background? Qual'è il suo codice HTML?

<div id="header"></div> ma il punto è che funziona tutto perfettamente
se non utilizzo javascript e non ci sono errori nel codice xhtml o css

non ottengo l'effetto desiderato e anche l'alert non mi viene
visto...

Sicuramente perché hai fatto confusione con gli ID, quindi ti genera
un errore.

utilizzo firefox ma anche con ie7 non succede niente...

Qualcosa succede di sicuro, se guardi l'Error Console di Firefox, ci
sarà di certo una qualche notifica d'errore.

ho controllato e mi dice questo: Errore:
document.getElementById("header") has no properties

ma perché poi anche l'alert non mi parte? questo è strano...

grazie ancora

De nada, e tranquillo che pian piano risolviamo il problema.

vediamo un po'

On Wed, 13 Feb 2008 16:22:49 GMT, Avatar - QUELLO VERO VERO - wrote:

Scusa il cutting selvaggio, ma passo subito al sodo:

[cut]

ho controllato e mi dice questo: Errore:
document.getElementById("header") has no properties

Colpa mia, quando ho letto "head" all'inizio ho pensato che tu volessi
cambiarlo al document e ti fossi sbagliato; poi ho notato che usavi il
getElementById ed ho capito che era un elemento diverso (da lì, il mio
suggerimento a cambiare id ).

Ma ero rimasto impostato sulla prima parte, quando ti ho detto che non
era necessario aspettare l'onload.

Il codice va messo dopo che il browser ha avuto modo di "parserizzare"
il tag che cerchi, oppure quando il document tree è pronto. Ad esempio
come avevi detto tu, nell'onload.

Quindi, sposta tutto là

ma perché poi anche l'alert non mi parte? questo è strano...

Non è strano per due motivi:

a) l'alert fa riferimento all'elemento che non trova.
b) quando in JS accadono degli errori, il browser spesso non procede.

De nada, e tranquillo che pian piano risolviamo il problema.

vediamo un po'

Sisi, ne sono certo.

--
~ "Il giusto altro non è che l'utile del più forte."
(Trasimaco)

Bene, ora sembra andare come dovrebbe...
il codice è questo:
<script type="text/javascript">
//<![CDATA[

var number = 3;

var num = Math.floor(Math.random() * number);

var immagine = "url(img/head" + num + ".jpg)";

//]]>
</script>
<title>Raffaele Testa - Photographer</title>
</head>
<body
onload="document.getElementById('header').style.ba ckgroundImage=immagine;">

qualche volta però non visualizzo l'immagine e credo che il problema sia
dovuto alla randomizzazione del numero...hai qualche sistema più
evoluto e sicuro per far vedere tre immagini in modo casuale? e se le
immagini fossero di più anche?
grazie per il tempo e la pazienza

On Wed, 13 Feb 2008 16:59:25 GMT, Avatar - QUELLO VERO VERO - wrote:

Bene, ora sembra andare come dovrebbe...
il codice è questo:

[cut]

l'onload puoi scriverlo direttamente nel tag script:

<head>
<title>Raffaele Testa - Photographer</title>

<!-- css e altro -->

<script type="text/javascript">

window.onload = function(){
var number = 3,
num = Math.floor( Math.random() * number ),
immagine = "url(img/head" + num + ".jpg)";

document.getElementById("header").style.background Image = immagine;
}

</script>

</head>
<body>
<!-- bla bla bla -->
</body>

qualche volta però non visualizzo l'immagine e credo che il problema sia
dovuto alla randomizzazione del numero...

Beh lo script ti caricherà le immagini aventi come parte finale del
nome 0, 1 o 2: non è che le hai salvate partendo da uno? Se è così,
scoperta la magagna. Altrimenti l'anomalia sta altrove.

hai qualche sistema più
evoluto e sicuro per far vedere tre immagini in modo casuale?

Bene o male il nocciolo è quello, ma se cerchi negli archivi del NG
dovresti trovare diversi post a riguardo (vai su google groups).

immagini fossero di più anche?

Basta aumentare il valore di number

grazie per il tempo e la pazienza

Di niente!

--
~ Io ho una filosofia semplice:
Riempi ciò che è vuoto. Vuota ciò che è pieno. Gratta ciò che prude.
(A. R. Longworth)

ZER0 ha scritto:

On Wed, 13 Feb 2008 16:59:25 GMT, Avatar - QUELLO VERO VERO - wrote:

Bene, ora sembra andare come dovrebbe...
il codice è questo:

[cut]


qualche volta però non visualizzo l'immagine e credo che il problema sia
dovuto alla randomizzazione del numero...

Beh lo script ti caricherà le immagini aventi come parte finale del
nome 0, 1 o 2: non è che le hai salvate partendo da uno? Se è così,
scoperta la magagna. Altrimenti l'anomalia sta altrove.

eh si, era questa la magagna...

hai qualche sistema più
evoluto e sicuro per far vedere tre immagini in modo casuale?

Bene o male il nocciolo è quello, ma se cerchi negli archivi del NG
dovresti trovare diversi post a riguardo (vai su google groups).

immagini fossero di più anche?

Basta aumentare il valore di number

grazie per il tempo e la pazienza

Di niente!

grazie ancora, gentilissimo!