sfondo immagine su href/onmouseover

ciao a tutti,
ho questo codice:

<div id="menu">
<ul>
<li><a href="#">01</a></li>
<li><a href="#">02</a></li>
<li><a href="#">03</a></li>
</ul>
</div>

vorrei fare in modo che "onmouseover" venisse impostato lo sfondo
immagine di ogni href, in base ad un array di immagini.

sto lavorando a sto codice ma non ne vengo a capo e non so come fare O_o

function hrefBg() {
var arrayImg = new Array('path01','path02','path03');
P = document.getElementById("menu").getElementsByTagNa me("a");
T = P.length;
for (var i=0; i<T; i++) {
P[i].onmouseover = P[i].style.backgroundImage.src = arrayImg[i];
}
}

ma non so dove e cosa sbaglio, nn funziona O_o

aiut!

--
vox

Il Wed, 28 Nov 2007 12:09:13 +0100, vox <spicillo (AT) dot (DOT) com> ha scritto:

ciao a tutti,
ho questo codice:

div id="menu"
ul
li><a href="#">01</a></li
li><a href="#">02</a></li
li><a href="#">03</a></li
/ul
/div

vorrei fare in modo che "onmouseover" venisse impostato lo sfondo
immagine di ogni href, in base ad un array di immagini.

E' proprio necessario farlo in javascript? La medesima cosa può esser
fatta con i soli css.

P[i].onmouseover = P[i].style.backgroundImage.src = arrayImg[i];

Questa riga contiene un po' di errori... alcuni proprio sintattici, che
dovrebbero esserti segnalati (se usi Firefox, guarda la console degli
errori), altri "semantici".

ma non so dove e cosa sbaglio, nn funziona O_o

Allora... innanzitutto, backgroundImage è una proprietà "semplice"
dell'oggetto style e non ha altre proprietà: dunque non esiste la
proprietà src di backgroundImage. backgroundImage è una proprietà che
accetta una stringa come valore, la quale stringa deve indicare
l'url dell'immagine che vuoi impostare come sfondo nel formato "url
(indirizzo)"; pertanto, per impostare un'immagine di background a un
oggetto tramite javascript occorre scrivere una cosa del genere:

oggetto.style.backgroundImage="url(indirizzoimmagi ne)"

Veniamo al secondo errore. Con l'istruzione che hai scritto, lasciando
stare il fatto di src appena discusso, ottieni il risultato di
assegnare una stringa all'event handler onmouseover; considera anche
che l'assegnazione funziona, per farla semplice, in maniera
"transitiva", cioè con un'istruzione del tipo

a = b = c

assegni il valore di c sia a b che ad a.
Un event handler, però, deve essere una funzione; quindi tu devi
scrivere un'istruzione che dica "assegna all'event handler LA FUNZIONE
che esegue l'assegnazione dello sfondo". In sunto, una cosa così:

P[i].onmouseover = function() {
P[i].style.backgroundImage = "url("+arrayImg[i]+")";
}

Osserva, però, che in questo modo cambi lo sfondo quando si verifica
l'evento mouseover... ma cosa succede quando l'utente muove il mouse e
si sposta dall'elemento?

--
Nando

On Wed, 28 Nov 2007 14:14:05 +0100, Nando wrote:

Un event handler, però, deve essere una funzione; quindi tu devi
scrivere un'istruzione che dica "assegna all'event handler LA FUNZIONE
che esegue l'assegnazione dello sfondo". In sunto, una cosa così:

P[i].onmouseover = function() {
P[i].style.backgroundImage = "url("+arrayImg[i]+")";
}

Aaaargh...!
Sei consapevole di ciò che hai fatto qui? Rileggi, analizza e
commenta; altrimenti grandi sciagure si abbatteranno su di te
e la tua gente! (mi piacciono i delirii mistici)

Osserva, però, che in questo modo cambi lo sfondo quando si verifica
l'evento mouseover...

Eh, si, ti piacerebbe. :P

--
~ "Non sono solitamente un uomo che prega,
ma se sei lassù, per favore salvami,Superman."
(Homer Simpsons)

Il Wed, 28 Nov 2007 14:14:05 +0100, Nando <aarrmmaaccoott (AT) gmail (DOT) com> ha
scritto:

P[i].onmouseover = function() {
P[i].style.backgroundImage = "url("+arrayImg[i]+")";
}

Una cappellata, pardon.
Occorre aggiustare un attimo il tiro, per questa assegnazione.

--
Nando

Il Wed, 28 Nov 2007 14:23:37 +0100, ZER0 <zer0.shock (AT) libero (DOT) it> ha
scritto:

On Wed, 28 Nov 2007 14:14:05 +0100, Nando wrote:

Un event handler, però, deve essere una funzione; quindi tu devi
scrivere un'istruzione che dica "assegna all'event handler LA
FUNZIONE che esegue l'assegnazione dello sfondo". In sunto, una
cosa così:

P[i].onmouseover = function() {
P[i].style.backgroundImage = "url("+arrayImg[i]+")";
}

Aaaargh...!
Sei consapevole di ciò che hai fatto qui? Rileggi, analizza e
commenta; altrimenti grandi sciagure si abbatteranno su di te
e la tua gente! (mi piacciono i delirii mistici)

Sì sì, pardon, stavo scrivendo sovrappensiero (mai farlo, MAI).
Non ho neanche idea di quello che succederebbe con una mostruosità del
genere... ho mischiato il locale al globale, il tutto al niente,
l'essere al nulla... un disastro!

--
Nando

On Wed, 28 Nov 2007 14:31:21 +0100, Nando wrote:

[cut]

P[i].onmouseover = function() {
P[i].style.backgroundImage = "url("+arrayImg[i]+")";
}

Aaaargh...!
Sei consapevole di ciò che hai fatto qui? Rileggi, analizza e
commenta; altrimenti grandi sciagure si abbatteranno su di te
e la tua gente! (mi piacciono i delirii mistici)

Sì sì, pardon, stavo scrivendo sovrappensiero (mai farlo, MAI).

Ho visto il tuo post successivo, quindi in parte ti sei salvato, ma..

Non ho neanche idea di quello che succederebbe con una mostruosità del
genere... ho mischiato il locale al globale, il tutto al niente,
l'essere al nulla... un disastro!

... non crederai mica di cavartela così a buon mercato, eh? Dai,
analizza il codice che hai scritto e cerca di capire cos'è che hai
fatto e come si comporterebbe tale codice (e perché).

Alla prima questione ti rispondo io: hai fatto una closure.

P.S.
Noto che anche tu in quanto delirii mistici..

--
~ "E' bello essere vivi.
Ci sono tante cose che non si possono fare da morti."

Nando ha scritto:

E' proprio necessario farlo in javascript? La medesima cosa può esser
fatta con i soli css.

si lo so, ma a parte la questione didattica (imparare, dico, non fa
male), non volevo fare dei css uno per ogni link, perche' qua ne ho
messi sono solo 3, ma e' un esempio "ridotto"!

P[i].onmouseover = P[i].style.backgroundImage.src = arrayImg[i];

Questa riga contiene un po' di errori... alcuni proprio sintattici, che
dovrebbero esserti segnalati (se usi Firefox, guarda la console degli
errori), altri "semantici".

mah, no FF non mi da errori :-/

Allora... innanzitutto, backgroundImage è una proprietà "semplice"
dell'oggetto style e non ha altre proprietà: dunque non esiste la
proprietà src di backgroundImage. backgroundImage è una proprietà che
accetta una stringa come valore, la quale stringa deve indicare
l'url dell'immagine che vuoi impostare come sfondo nel formato "url
(indirizzo)"; pertanto, per impostare un'immagine di background a un
oggetto tramite javascript occorre scrivere una cosa del genere:

oggetto.style.backgroundImage="url(indirizzoimmagi ne)"

Veniamo al secondo errore. Con l'istruzione che hai scritto, lasciando
stare il fatto di src appena discusso, ottieni il risultato di
assegnare una stringa all'event handler onmouseover; considera anche
che l'assegnazione funziona, per farla semplice, in maniera
"transitiva", cioè con un'istruzione del tipo

a = b = c

assegni il valore di c sia a b che ad a.
Un event handler, però, deve essere una funzione; quindi tu devi
scrivere un'istruzione che dica "assegna all'event handler LA FUNZIONE
che esegue l'assegnazione dello sfondo". In sunto, una cosa così:

P[i].onmouseover = function() {
P[i].style.backgroundImage = "url("+arrayImg[i]+")";
}

Osserva, però, che in questo modo cambi lo sfondo quando si verifica
l'evento mouseover... ma cosa succede quando l'utente muove il mouse e
si sposta dall'elemento?

uhm... ti ringrazio molto, ma ci deve essere qualcosa che non va in
quello che ho appena corretto seguendo come posso il discorso.

qui c'e' la funzione completa:

function hrefBg() {
var P,T;
var arrayImg = new Array(
'path..',
'path..',
'path..');
P = document.getElementById("menu").getElementsByTagNa me("a");
T = P.length;
for (var i=0; i<T; i++) {
P[i].onmouseover = function() {
P[i].style.backgroundImage = "url("+arrayImg[i]+")";
}
}
}

e la inizializzo cosi':

window.onload = function() {
hrefBg();
}

onmouseover ricevo questo errore:

Errore: P[i] has no properties
File sorgente: pippo.js
Riga: 11

riga 11 cioe':

P[i].style.backgroundImage = "url("+arrayImg[i]+")";

--
vox

Il Wed, 28 Nov 2007 14:35:32 +0100, ZER0 <zer0.shock (AT) libero (DOT) it> ha
scritto:

On Wed, 28 Nov 2007 14:31:21 +0100, Nando wrote:

[cut]
P[i].onmouseover = function() {
P[i].style.backgroundImage = "url("+arrayImg[i]+")";
}

Aaaargh...!
Sei consapevole di ciò che hai fatto qui? Rileggi, analizza e
commenta; altrimenti grandi sciagure si abbatteranno su di te
e la tua gente! (mi piacciono i delirii mistici)

Sì sì, pardon, stavo scrivendo sovrappensiero (mai farlo, MAI).

Ho visto il tuo post successivo, quindi in parte ti sei salvato, ma..

Non ho neanche idea di quello che succederebbe con una mostruosità
del genere... ho mischiato il locale al globale, il tutto al niente,
l'essere al nulla... un disastro!

.. non crederai mica di cavartela così a buon mercato, eh? Dai,
analizza il codice che hai scritto e cerca di capire cos'è che hai
fatto e come si comporterebbe tale codice (e perché).

Alla prima questione ti rispondo io: hai fatto una closure.

Sì, questo è chiaro. Riguardo al valore di i, semplicemente
all'onmouseover l'handler prende il valore *corrente* di quella i (o
meglio, dell'immagine che se ne è creata o quel che l'è), per cui quella
i avrà sempre e solo l'ultimo valore del ciclo (quello di uscita dal
ciclo) con risultati ovvi. Ovviamente non serviva quel P[i], bastava un
this, ma per recuperare l'immagine giusta bisogna seguire un altro
approccio. Dimmi cosa ho sbagliato/omesso

P.S.
Noto che anche tu in quanto delirii mistici..

Lasciamo perdere: è un periodo in cui ho troppe cose da fare e non
dovrei impiegare il mio tempo libero qui, a fuorviare i poveri utenti
in cerca d'aiuto!

--
Nando

Il Wed, 28 Nov 2007 14:25:00 +0100, Nando <aarrmmaaccoott (AT) gmail (DOT) com> ha
scritto:

Il Wed, 28 Nov 2007 14:14:05 +0100, Nando <aarrmmaaccoott (AT) gmail (DOT) com
ha scritto:

P[i].onmouseover = function() {
P[i].style.backgroundImage = "url("+arrayImg[i]+")";
}

Una cappellata, pardon.
Occorre aggiustare un attimo il tiro, per questa assegnazione.

Bene, ora che ho sondato la reattività di ZER0 e ho verificato che è
ancora in forma (era questo il mio intento, cosa credete?), ti direi:
cambia approccio
Con il tuo, definendo un array di immagini nella funzione hrefBg e
utilizzando un'istruzione simile a quella che ti ho scritto (con
qualche *piccolissimo* accorgimento ), ti ritroveresti a navigare nel
mare delle closures e non mi pare questo il caso di farlo. Io torno a
suggerirti i css ma se vuoi proprio usare js forse è meglio
"agganciare" in qualche modo gli url delle immagini agli elementi
anchor relativi. Ma davvero mi pare un delirio inutile.

--
Nando

Nando ha scritto:

Bene, ora che ho sondato la reattività di ZER0 e ho verificato che è
ancora in forma (era questo il mio intento, cosa credete?), ti direi:
cambia approccio
Con il tuo, definendo un array di immagini nella funzione hrefBg e
utilizzando un'istruzione simile a quella che ti ho scritto (con
qualche *piccolissimo* accorgimento ), ti ritroveresti a navigare nel
mare delle closures e non mi pare questo il caso di farlo. Io torno a
suggerirti i css ma se vuoi proprio usare js forse è meglio
"agganciare" in qualche modo gli url delle immagini agli elementi
anchor relativi. Ma davvero mi pare un delirio inutile.

boh io sto solo cercando un modo per non dover scrivere qualche decina
di css oltre il dovuto :-/
e per quanto riguarda le closures... sono cose che si mangiano?

--
vox