Newsgroup: it.comp.lang.javascript
Titolo: trasferire immagine da img ad altro img senza usare src

Premetto che la pagina ha il seguente doctype
<?xml version="1.0" encoding="ISO-8859-1"?>
<!DOCTYPE html PUBLIC "-//WAPFORUM//DTD XHTML Mobile 1.1//EN" "http://
www.openmobilealliance.org/tech/DTD/xhtml-mobile11.dtd
">
<html xmlns="
http://www.w3.org/1999/xhtml
">
trattandosi di pagina web per mobile device.
Sto costruendo un gioco di carte; avrei necessità di trasferire una
immagine di carta caricata in un tag <img /> ad altro <img /> senza
dover interessare nuovamente il server con src.
In pratica la posizione delle img sullo screen sono fisse, dovrebbe
solo spostarsi l'immagine da un tag all'altro.
Qualcosa di simile a visual basic come
picture1.picture=picture2.picture.
Esiste una soluzione?
Grazie

 Esiste una soluzione?
Dai un'occhiata all'oggetto Image di JavaScript. Puoi effettuare 
operazioni del tipo:
mage1 = new Image();
image1.src = "uno.png";
...
image2.src = image1.src;
Così cambi le immagini/src e gestisci anche il preload.
Altrimenti puoi utilizzare una delle molte librerie grafiche già pronte 
che gestiscono drag&drop o effetti grafici ma mi sembra di capire che 
non sia il tuo caso.

 picture1.picture=picture2.picture.
Come ha detto Paolo, basta tuaimmagine.src=altraimmagine.src
attenzione però al caching, non puoi mai garantire al 100% che non la 
ricarichi dal server ... la strada più sicura anche secondo me è fare un 
preload, e usare quegli oggetti per assegnare l'src.


In realtà era il primo tentativo che avevo effettuato ma firefox mi
ritornava un bel 'null'.
Il cretino, che sono io!!!, scriveva nell'ID Image2 anzichè image2.
Ora funziona, scusate il disturbo per una mia stupidaggine.
Grazie comunque e sempre per la tempestività con cui date una risposta
ai quesiti del dilettanti.
Davide

 image2.src = image1.src;
In questo caso è semplicemente un overhead. Le due immagini sono già
cachate dal browser, perché source di due tag img. Il codice che hai
scritto te, serve quando non ci sono tag img in cui l'immagine è già
stata caricata. In pratica creare un oggetto Image è uno step in più
che si può evitare; basta fare image2.src = image1.src.
-- 
"When you have eliminated the impossible, whatever remains, however
improbable, must be the truth."

 preload, e usare quegli oggetti per assegnare l'src.
A che pro? Se la carica dal server facendo il codice di cui sopra, la
ricaricherà dal server anche usando le tecniche di preload tramite
oggetti Image(); dato che è la stessa medesima azione.



x ZER0
Mi stai dicendo che sia con il preload che facendo
image1.src=image2.src interesso nuovamente il server ogni volta che
l'immagine viene caricata in un altro tag <img />?
Poichè sto costruendo un solitario di carte da giocare on line su
smartphone, mi preme che il collegamento internet sia sfruttato il
meno possibile, ma non voglio ricorrere a HTML5 e session storage o
cached.
Se così fosse, quale altro soluzione c'è?

 l'immagine viene caricata in un altro tag<img />?
No, credo voglia dirti che se hai già caricato i tag img le immagini 
sono già in cache e quindi (s)cambiandole via JavaScript non si va a 
chiamare il server.
Se invece usi una nuova immagine il fatto che usi "new Image()" comporta 
comunque una chiamata al server.

 In questo caso è semplicemente un overhead.
Sì, hai perfettamente ragione.
Non sapendo esattamente come sia scritto il codice dell'OP ho postato 
una soluzione "generale".

 una soluzione "generale".
Grazie per le precisazioni.
A questo punto la soluzione migliore potrebbe essere questa:
preload delle 40 o 52 carte in "new image()" magarti utilizzando un
array; scambio con image1.src=image2.src durante il gioco.
Ciò comporta però uno scarico da server per le sole immagini delle
carte di (2k x 40) 80k: non poco se si utilizza una linea internet
lenta.
Siete comunque d'accordo su questa soluzione. Grazie.

 Siete comunque d'accordo su questa soluzione.
Questo non te lo so dire... ;-)

 lenta.
Usando un'unica immagine eviti di avere header per tutti i file, quindi
il peso risultante è minore che se fossero separate. Ma se ti
preoccupano 80KB al giorno d'oggi, evita pure di metterti a fare giochi
in JS usando immagini. :) Anche quando avevo il 56K, 80KB non erano un
dramma. E comunque la lentezza sarebbe unicamente al primo caricamento
(fintanto che l'utente non pulisce la cache del browser).
Eventualmente puoi ripiegare su non usare delle immagini, ma usare i CSS
e i simboli testuali dei vari semi per avere delle carte veramente
"light". Ovviamente le figure non ci saranno, avrai solo la lettera "K",
"J", e "Q"; mentre per tutte le altre carte le puoi simulare alla
perfezione.
Alternativamente puoi usare un approccio misto, dove usi le immagini
solo per le figure e non per il resto del mazzo.


 improbable, must be the truth."
Sei molto ferrato in materia, io sono un dilettante.
Preciso che si tratta di carte napoletane per cui hanno bisogno di
tanti colori per essere rese decentemente con dimensioni 35x56px.
Anch'io avevo pensato allo sprite, ma sono riuscito a diminuire il
peso di ogni singola carta a 1kb (40x1=40k); sopportabile con le
attuali linee per smartphone.
Per i solitari con carte anglo-americane userò come tu stesso
consigli, simboli testuali.
Grazie mille per tutti i consigli.