Richiamare GIF con numeri crescenti (gif1, gif2...)

**Spider Baby** · 17-09-2003, 09:49

Ciao a tutti.
E' sicuramente uno scriptino molto semplice, ma il mio JS è molto molto arrugginito...
Ho una tabella in cui le celle di una colonna devono avere ognuna uno sfondo diverso; questi piccoli sfondi sono delle gif con numeri incrementali, da bg1.gif a bg20.gif.
Devo fare in modo che questi sfondi vengano richiamati dal codice automaticamente, non inserendoli manualmente nell'HTML, perché la tabella è creata dinamicamente.
Insomma devo avere uno script che definisce il nome del gif da richiamare, e che ogni volta che viene attivato incrementa il numero del gif, in modo da avere la prima cella con bg1.gif, la seconda bg2.gif, etc.
Qualcosa tipo (scusate la rozzezza del codice:
sfondo="bg"+"i++"+".gif" :quipy:

Spero di essere riuscito a spiegarmi.
grazie

SB

**Mich_** · 17-09-2003, 10:17

Nella head:

codice:

<script ...>
var indice=0; // inizializzazione indice
</script>

Poi quando ti serve lo sfondo (quindi nel body):

codice:

<script...>
document.write('\<td ... style=\"background-image\:bg'+indice+'\.gif\;\"\>');
indice++;
</script>

Notare l'utilizzo con significati diversi di apici e virgolette.

Se vuoi la compatibilita` con HTML4 e XHTML devi metterci i backslash davanti ai caratteri < > . ' " : ma solo se fanno parte della stringa da scrivere nella pagina.

Ciao
Michele

**Spider Baby** · 17-09-2003, 11:30

Ti ringrazio Michele, tuttavia ho ancora due problemi:
il primo è che non mi visualizza l'immagine di bg usando lo style, non so perché (ho anche corretto "background-image" in "background\-image"). E' semplice html. Funziona invece se uso il comando "TD background=".

Il secondo, e più importante, è che vorrei che la tabella fosse una vera tabella all'origine, non parzialmente creata dal JS. Mi spiego meglio: andrebbe bene se il JS scrivesse solo la parte riguardante il BG, e non anche il codice del TD, altrimenti a livello di codice (ti ricordo che è una tabella generata da un programma) questa non è una tabella, anche se dal browser viene visualizzata come tale.
Non esiste un modo per inserire solo la funzione nel tag TD, senza anche il tag SCRIPT?
grazie ancora

SB

**Mich_** · 17-09-2003, 11:45

Non so che browser usi.

Se il browser e` recente, poi creare la tabella tutta assieme inHTML e poi con una funzione JS (ad esempio all'onLoad) modificare tutti gli sfondi uno alla volta:

for(var i=0; i<MAX; i++)
document.getElementById('tidi'+i).style.background Image = 'bg'+i+'.gif';

Altrimenti puoi anche fare:
<td
<script ...>document.write('background="bg'+index+'.gif" '); index++; </script>
width="20" height="12">

in cui solo l'attributo viene scritto dallo script (se non funzionano gli script la pagina e` ancora valida, ma senza background delle celle)

Ciao
Michele

**v2v2** · 17-09-2003, 11:57

Ciao scusate l'intrusione ma volevo postarvi anche una mia mezza idea per risolvere il problema

codice:

<HTML>
<HEAD>
<script>
function cambia() {
	if(document.getElementsByTagName) { 
		for(i=0; i < document.getElementsByTagName("TD").length; i++){
			x="url(bg"+i+".gif)";
			document.getElementsByTagName("TD")[i].style.backgroundImage=x;
		}
	}
}
</script>
</HEAD>
<BODY onLoad="cambia()">
<table>
<tr>
<td>ffff</td><td>fffff</td>
</tr>
</table>
</BODY>
</HTML>

**Spider Baby** · 17-09-2003, 16:47

Grazie a entrambi, l'idea del FOR/onload è proprio quello che cercavo.
A questo punto aggiungo una richiesta per un ulteriore possibile sviluppo: questo metodo potrebbe tornare utile anche per variare il colore del background delle celle?
Mi spiego: ho un'altra tabella in cui le righe devono essere di due colori alternati. Forse si può usare un for coi TR, i<2, che così cambia due volte il colore e poi riprende da capo?
Devo proprio studiarmi il JS.... in teoria mi piace

grazie ancora.

SB

**Spider Baby** · 18-09-2003, 09:54

UP....?

Originariamente inviato da Spider Baby
Questo metodo potrebbe tornare utile anche per variare il colore del background delle celle?
Mi spiego: ho un'altra tabella in cui le righe devono essere di due colori alternati. Forse si può usare un for coi TR, i<2, che così cambia due volte il colore e poi riprende da capo?

**Mich_** · 18-09-2003, 10:03

Ma non era una domanda pleonastica?

E` chiaro che puo` servire!!!

Puoi azzerare l'indice ogni volta, oppure puoi usare l'operatore modulo:
indice % 2

che ritorna 1 per i numeri dispari e 0 per i numeri pari.

Allora mi pare che JS ti stia divertendo: comincia a guardarti il tutorial di HTML.it .

Ciao
Michele

**roboro** · 18-09-2003, 10:59

ciao
iomi intrometto...

e se volessi inserire le immagini 1, 2, 3, 4, 5, ecc fino alla 20 in una tabella con 4 righe e 5 celle?..Le img didimensioni 120 * 120 che quando le clicco mi aprono la pop up con l' img grande??

Grazias

**Spider Baby** · 18-09-2003, 11:12

Mi sto applicando...

Non ho ben capito come funziona l'indice %2 che mi hai detto, e non ho ancora trovato riscontro nei tutorial.
Gli antichi ricordi di C++ poi rischiano di confondermi ancora di +.

Guarda questa eresia che ho scritto (che ovviamente non funziona) e dimmi per favore se c'è qualcosa di sensato:

codice:

<script>
function riga() {
	if(document.getElementsByTagName) { 
		for(i=0; i < document.getElementsByTagName("TR").length; i++){
			if(i%2=1){
				document.getElementsByTagName("TR")[i].style.backgroundColor="#FFFFFF";}
				else {document.getElementsByTagName("TR")[i].style.backgroundColor="#000000";}
			
		}
	}
}
</script>

L'intento di tale codice sarebbe di rendere una riga bianca e una nera alternatamente.

Discussione: Richiamare GIF con numeri crescenti (gif1, gif2...)

Strumenti discussione

Ricerca discussione

Visualizza

Richiamare GIF con numeri crescenti (gif1, gif2...) [urgente]

x Mich_

Permessi di invio