Nike iD con Javascript, o come?

Buongiorno,
ho un prodotto da vendere online: il prodotto è formato da tre parti, e ognuna di queste tre parti può assumere 12 tonalità.

Mi piacerebbe che dal mio sito gli utenti potessero vedere in diretta le anteprime del prodotto aggiustato con i colori che vogliono loro, per poi acquistare.

In sostanza è come il Nike iD, c'è la scarpa con le varie parti, e per ogni parte si sceglie il colore.

Ecco io devo fare la stessa identica cosa, con la differenza che il mio prodotto non deve essere visto a 360 gradi come la scarpa ma basta frontalmente, e che è suddiviso in sole tre parti.

E' possibile fare tutto ciò con javascript? Oppure con qualcos'altro?

Come devo muovermi?


Potrei ad esempio creare 12 varianti delle tre parti e salvarle come immagini, per poi aprirle con javascript cliccando su bottoni che riportano lo stesso colore dell'immagine da aprire.
Così a sinistra ad esempio metto le tre parti (tre immagini), e a destra per ogni parte la tabellina con i 12 colori, e se si clicca sui colori cambiano le immagini a sinistra e saltano fuori quelle che ho creato io, così mentre gli utenti provano i colori hanno a sinistra sempre l'anteprima, SENZA CHE LA PAGINA SI RICARCHI.

Può funzionare?

Se la divisione nelle tre parti non è eccessivamente complicata (leggi: puoi facilmente suddividere l'immagine globale dell'oggetto in rettangoli), può funzionare.

Provo a suggerirti una soluzione un pochino più elegante, ma che richiede sempre che l'immagine sia facilmente frazionabile in rettangoli.

Per prima cosa prepara con un programma di grafica il tuo oggetto nel modo seguente:
- le parti non selezionabili dal tuo cliente devono avere i colori che assegni tu
- le parti selezionabili dal cliente devono avere lo sfondo trasparente
- se è previsto uno sfondo, questo non deve essere trasparente

Realizzato l'oggetto, suddividilo nei rettangoli e salva i singoli pezzi come immagini a sé stanti.

Quindi ricostruisci l'oggetto sulla tua pagina HTML, importando questi pezzi: una volta tanto è il caso di usare tabelle con attributi "colspan" e "rowspan" a tutto spiano. Molto importante: assegna degli "id" alle celle, ti serviranno per la modifica dei colori.

(Le due fasi precedenti sono piuttosto complicate da realizzare a mano: una volta esisteva Macromedia Fireworks che riusciva a realizzare tutto in automatico, non so se è ancora disponibile... e comunque è a pagamento)

Hai quasi finito: aggiungi le tre serie di pulsanti e fai in modo che, cliccato il pulsante, il colore di sfondo della/e cella/e che ospitano la parte coinvolta (capito a che servono gli id?) vengano cambiati di conseguenza.

Tutto chiaro? Penso mica tanto...

Stammi bene...

Si infatti non è chiarissimo, anche se ovviamente ti ringrazio tantissimo per l'interessamento.

Tu potresti darmi una mano a realizzarlo?
Io posso provvedere alla parte grafica, che magari è la più noiosa.

Direi che intanto è il caso che prepari la parte grafica, che non è proprio tra le più semplici... poi penseremo a buttare giù due righe di HTML e JavaScript per comporre il tutto.

Stammi bene...