Problema inserimento immagine con for [JS]

**alemoppo** · 31-08-2008, 20.05.51

Questa funzione è tra <head> e </head>. In pratica fa vedere delle immagini e le assegna come sfondo al passaggio del mouse.

Codice HTML:

<script language="Javascript">
function visualizza()
{
	var x=document.margini.min.value;
	var y=document.margini.max.value;
	if(y<355 && x<356 || y<0 || x<0)
             {
                  if(x>y)
                  {
                   	var temp=x;
		          x=y;
                          y=temp;
                   }
	     for(x=1;x<=y;x++)
	     {
		     document.write("<center><img src='sfondi/"+x+".jpg' onMouseOver=(document.body.background='sfondi/"+x+".jpg');><br>");
   		   
                  }
	}
             else alert("Hai immesso uno o più valori non accettabili");
}
</script>

La richiamo dal body [e fin qui tutto OK (funziona)]... ma quando questa funzione viene richiamata (X=0; Y=1;), MI CANCELLA TUTTO IL CONTENUTO DELLA PAGINA e ci mette SOLO le foto: è come se mi aprisse una nuova pagina... addirittura, se visualizzo il codice HTML, c'è scritto:

Codice HTML:

<center><img src='sfondi/1.jpg' onMouseOver=(document.body.background='sfondi/1.jpg');><br>

...ovvero solo il contenuto del document.write...

?????COME DEVO FARE PER MANTENERE TUTTO IL CONTENUTO DELLA PAGINA?????

P.S : Scusate per l'allineamento del codice: non sò perchè è così sballato...

GRAZIE!

**dementialsite** · 01-09-2008, 19.16.23

Il tuo problema è proprio il fatto che stai usando document.write(): quella è una funzione che è stata pensata per scrivere del codice PRIMA che questa venga completamente elaborata dal tuo browser. Poiché lo script agisce quando il browser ha già caricato tutta la pagina, a quella funzione non resta altro che creare un nuovo documento.

Puoi risolvere il problema usando innerHTML anziché document.write(), devi però inserire nella pagina un DIV che andrai a modificare attraverso lo script, basta questo:

Codice HTML:

<div id="sfondo"></div>

Per modificare lo sfondo, sostituisci la riga incriminata con questa:

Codice:

document.getElementById('sfondo').innerHTML = "<center><img src='sfondi/"+x+".jpg' onMouseOver=(document.body.background='sfondi/"+x+".jpg');><br>";

Stammi bene...

**alemoppo** · 01-09-2008, 22.06.02

Grazie infinite per la risposta... (funziona!!!)... il problema (credo) è:

Codice HTML:

<div id="sfondo">

(credo sia colpa di questo), fa apparire SOLO una immagine: io voglio visualizzarne più di una (infatti avevo messo il for)...
Quindi ho provato a fare una cosa del genere dove dovrebbero apparire le immagini:

Codice HTML:

<script language="Javascript">
var x=document.margini.min.value;
var y=document.margini.max.value;
while (x<y)
{
<div id="sfondo">
     x++;
}
</script>

...ma non funziona!!! ... ho provato anche con il document.write ovvero:

Codice HTML:

<script language="Javascript">
var x=document.margini.min.value;
var y=document.margini.max.value;
while (x<y)
{
document.write("<div id="sfondo">");
     x++;
}
</script>

...scusa se insisto con quel document.write, ma CONOSCO SOLO QUEL METODO {+ quello che mi hai scritto}!!

...abbi pazienza, ma in Javascript ho imparato con alcuni esempi e materiale trovato in internet e lo sto usando da un paio di settimane quindi devo imparare...!!!

GRAZIE!!

**dementialsite** · 01-09-2008, 22.46.01

Riproviamo a spiegarla così:
- il segnaposto <div id="sfondo"></div> deve essere già presente nel codice HTML della pagina, non devi inserirlo nello script (anche perché come l'hai scritto tu non ha alcun senso...)
- quanto alle immagini, devi procedere così: prima del ciclo svuota il DIV (giusto per sicurezza...) azzerando il codice HTML presente all'interno. Poi inserisci il codice delle immagini in modo incrementale (si usa += e non =). In definitiva:

Codice:

var x=document.margini.min.value;
var y=document.margini.max.value;
document.getElementById ('sfondo').innerHTML = '';
while (x<y)
{
     document.getElementById ('sfondo').innerHTML += "<center><img src='sfondi/"+x+".jpg' onMouseOver=(document.body.background='sfondi/"+x+".jpg');><br>";
     x++;
}

Stammi bene...

**alemoppo** · 01-09-2008, 23.39.21

Grazie !!!!! : funziona alla perfezione...

Visto che poi in onMouseOver ci vorrei mettere più di una funzione, ho pensato di mettere il "document.body.background='sfondi/"+x+".jpg';" dentro un'altra funzione:

Ho modificato questo:

Codice HTML:

document.getElementById ('sfondo').innerHTML += "<center><img src='sfondi/"+x+".jpg' onMouseOver=(document.body.background='sfondi/"+x+".jpg');><br>";

In questo:

Codice HTML:

document.getElementById ('sfondo').innerHTML += "<center><img src='sfondi/"+x+".jpg' onMouseOver=a(x);><br>";

... naturalmente aggiungendoci la funzione a():

Codice HTML:

function a(x)
{
	document.body.background='sfondi/"+x+".jpg';
}

... Dovrei fare così in modo di salvare l'immagine in un cookie... [in a()]

MA NON MI FUNZIONA:

Le immagini le mostra, ma poi se vado sopra con il mouse, mi viene errore (e lo sfondo non cambia!!) { :-( }

... Quindi perchè (forse) c'è un problema in function a(x) ... ???

GRAZIE!!!!!!!

**dementialsite** · 02-09-2008, 10.42.35

Originalmente inviato da alemoppo

... Quindi perchè (forse) c'è un problema in function a(x) ... ??? ...

Ehm... sì. Stai mischiando i due tipi di "virgolette" ('single-quote' con "double-quote"). Nel codice sopra funzionava perché alternavi correttamente le virgolette che rappresentavano la stringa JavaScript, con quelle in output sul codice HTML: se sei alle prime armi capirlo è un po' un casino... :-D

Soluzione, ovvia: riscrivi l'unica riga della funzione usando virgolette di un solo tipo (e, piccolo consiglio, assegnale un nome un po' più significativo di "a", tipo "salva_sfondo" o simili: come farai a ricordarti in seguito che quella funzione cambia lo sfondo e lo salva su un cookie?)...

Stammi bene...

**alemoppo** · 03-09-2008, 21.30.36

Scusa se non ce la faccio... !!! :

Ho mantenuto questo:

Codice HTML:

while(x<y)
	     {
   		     document.getElementById ('sfondo').innerHTML += "<center><img src='sfondi/"+x+".jpg' onMouseOver=a(x);><br>";
   		     x++;
             }

...credo che fin qui ci siamo, no??...

poi la funzione a()...

Ho provato così [virgolette di un solo tipo (come mi hai detto)]:

Codice HTML:

<script language="Javascript">
function a(x)
{
	        document.body.background='sfondi/'+x+'.jpg';
     //oppure:  document.body.background="sfondi/"+x+".jpg";
  
     //ho provato anche:
     //            document.body.background='sfondi/"+x+".jpg';
     //            document.body.background="sfondi/'+x+'.jpg";
     //            document.body.background='sfondi/"+x+".jpg';
     //            document.body.background=sfondi/"+x+".jpg;
     //            document.body.background=sfondi/'+x+'.jpg;
}
</script>

... ma non ne funziona nessuno!!

p.s. ...per il nome della funzione non ti preoccupare... dopo (se e quando) funzionerà, cambio il nome... Programmo 'discretamente' con il C (quindi ho una piccola esperienza con la programmazione...)... ma GRAZIE COMUNQUE!

**dementialsite** · 04-09-2008, 11.12.46

Riusciresti a mettere il tutto su una pagina in rete?

Intanto, verifica anche questo: i nomi delle immagini sono tutti del tipo <numero>.jpg (e senza "trailing zero" ovvero gli zeri iniziali a pareggiare il numero di cifre) e si trovano tutte sulla cartella "sfondi" che a sua volta si trova nella stessa cartella della tua pagina?

Stammi bene...

**alemoppo** · 05-09-2008, 07.12.43

Le immagini si chiamano tutte numero.jpg ... il "numero" è ad una cifra, due o tre (da esempio 1.jpg ... 27.jpg ... 103.jpg) e la directory è quella (altrimenti, perchè prima funzionava?)... forse ho sbagliato in qualche altro posto... comunque adesso provo a metterlo in rete (tanto, prima o poi lo dovrò mettere!!)...

Comunque mi ci vorrà del tempo: ho la 56k (l'ADSL non arriva...!!!)

Grazie comunque per tutto!

p.s. l'indirizzo lo sai meglio di me, no? : dovrebbe essere alemoppo.altervista.org

**dementialsite** · 05-09-2008, 13.49.09

Originalmente inviato da alemoppo

... p.s. l'indirizzo lo sai meglio di me, no? : dovrebbe essere alemoppo.altervista.org

Quello che intendevo era proprio il link diretto alla pagina... comunque, grazie al formidabile sistema di autenticazione che hai implementato (:-D), ho trovato lo stesso...

Da quel che ho potuto vedere il codice "funziona" su Firefox, forse quello che non ti aspetti è che inserendo due numeri uguali sulle caselle non viene visualizzata nessuna immagine. In realtà non è un errore dello script: hai chiesto di visualizzare tutte le immagini il cui numero sia compreso tra "x" (incluso) e "y" (escluso). Da qui, se "x" e "y" sono uguali, non sarà visualizzato niente...

Se non è questo che ti aspettavi (almeno, per me sarebbe più logico che con due numeri uguali fosse visualizzata solo l'immagine richiesta), il problema è di facile soluzione: ti basta cambiare la condizione del while da "x < y" a "x <= y"...

Stammi bene...

**alemoppo** · 06-09-2008, 06.39.49

???funziona???

Io ho IE 7 (lo so che non è il massimo, ma dovrebbe funzionare uguale, no?): ...comunque se vado con il puntatore del mouse sopra una immagine, non l'assegna come sfondo ![da un errore (nella barra di stato)]!! ... ovvero non esegue a(x)... (ALMENO A ME!) ... a te funziona??

...ho fatto che se scegli x=0; y=0; non visualizza niente in modo di aprire velocemente la pagina all'arrivo (sai, per chi ha la 56k come me...!!!)...così, se uno ad esempio vuole vedere solo la 127° immagine, può evitare di caricare la prima!...

p.s.: ho provato a mettere un'altra pagina (che mi funzionava {vedi il 5° messaggio} ) ho messo:

Codice HTML:

document.getElementById ('sfondo').innerHTML += "<center><img src='sfondi/"+x+".jpg' onMouseOver=(document.body.background='sfondi/"+x+".jpg');><br>";

...ovvero senza usare la funziona a()... ma non mi funziona più nemmeno questo....!!! : forse ho un errore in IE !

**dementialsite** · 06-09-2008, 09.51.28

A dir la verità, credo di non averlo provato così bene lo script... '^_^

L'errore che ti da Internet Explorer (però è vero che Firefox di errori non me ne segnala) è "'x' non è definito". Questo perché quando stampi il codice - ad esempio dell'immagine 0 - lo stampi in questo modo:

Codice:

<center><img src='sfondi/0.jpg' onMouseOver=a(x);><br>

In altre parole, sostituisci correttamente la prima occorrenza di x, ma non la seconda: per risolverlo ovviamente devi inserire x come variabile e non come costante, così:

Codice:

document.getElementById ('sfondo').innerHTML += "<center><img src='sfondi/"+x+".jpg' onMouseOver=a("+x+");><br>";

In questo modo, credo che funzionerà tutto...

Stammi bene...

Discussione: Problema inserimento immagine con for [JS]

LinkBack

Strumenti discussione

Display

Problema inserimento immagine con for [JS]

Regole di scrittura