Sovrapporre più immagini a scelta sopra ad una principale 
Autore: Carmelo P.Far apparire e scomparire più immagini in sovrapposizione su uno sfondo statico mediante un click che le aggiunga o le tolga a scelta.
Di seguito il principio applicato a del semplice testo che appare e scompare:
<script type="text/javascript">
function Vedi(quale) { document.getElementById(quale).style.display = 'block';
}
function Nascondi(quale) { document.getElementById(quale).style.display = 'none';
}
</script>
<a href="#self" onclick="Vedi('id01')" onmouseover="Nascondi('id01')" >Ciao</a>
<div id="id01" style="display:none">CIAO SONO UN DIV NASCOSTO</div>
Quello che mi piacerebbe riuscire a fare è sostituire alla parola "ciao", 3/6 miniature di immagini (sempre visibili) che con un click possano apparire e scomparire su di una immagine vicina un pò più grande ne lasci intravedere le trasparenze in sovrapposizione.
Qualcosa di molto simile ad uno slide show su livelli sovrapposti ma con la possibilità di scegliere la combinazione delle immagini che si vogliono aggiungere o togliere.
L'argomento non è proprio il mio forte e mi auguro che l'esempio sopra possa suggerire qualche intuizione ai più coraggiosi, per trovare la soluzione ad un effetto dinamico che potrebbe tornare utile anche a qualcun altro.
Grazie! : )
P.S.
Spero di essere stato chiaro nella descrizione
... anche se sono esempi vecchissimi, e se ne sei interessato, è tutto in chiaro nel codice della pagina, il resto dipenderà da te: http://www.zspace.it/kolasim/website/divsinoK/pagina_1.html http://www.zspace.it/kolasim/website/divsino2K/pagina_1.html
...
ciao
Autore
Grazie per la risposta...
peccato che dopo tanta fatica e apprezzamenti rivolti alla disponibilità degli esperti che su questo forum si spendono non poco, la mia replica sia andata persa con la recente manutenzione alla piattaforma. Pazienza...
Ricapitolando quanto avevo già scritto stamane;
Gli esempi sopra, che si avvicinano all'effetto desiderato ma che fanno riferimento alle celle che website imposta in automatico, mostrano le immagini "una sotto l'altra" e non una sopra l'altra.
Di seguito un altro interessante esempio che al click sulla miniatura, fà apparire e scomparire la relativa immagine:
<script type="text/javascript">
function showHide(id)
{
if (id.style.display != 'block')
id.style.display = 'block';
else
id.style.display = 'none';
}
</script>
<a href="#" onClick="[removed]showHide(ID);"><img src="http://www.picgifs.com/wallpapers/cars/audi-tt/wallpaper_audi-tt_animaatjes-9.jpg" alt="name="audi" width="50" height="50" id="img" style="" /></a>
<div id="ID" style="display:none"><img src="http://www.picgifs.com/wallpapers/cars/audi-tt/wallpaper_audi-tt_animaatjes-9.jpg" alt="name="audi" width="200" height="200" id="img" style="" /></div>
Tempo fa avrei utilizzato flash ma oltre ad essere parecchio arrugginito, non credo sia la solozione più compatibile.
Ora, prendendo per buono l'esempio subito sopra, c'è il modo di impostare una prima immagine fissa di sfondo per poi aggiungere o togliere a scelta delle altre immagini sovrapposte come nei livelli di photoshop?...Spero possa essere utile anche per qualcun altro : )
Ciao!
... sempre e solo come idea, perché sono senza PC e senza programmi, ...potresti prendere spunto dal mio esempio/invenzione, basato sui DIV CUSTOM by Icm, cui glorioso vecchio Forum, che in questi giorni sembra non funzionare...
... puoi impilare tutti i DIV che vuoi, e controllarli nello stesso modo che hai visto negli esempi precedenti, ed il fatto che i DIV precedenti siano della pagina non vuol dire niente, ed in questo caso infatti i DIV li crei tu con le stesse medesime coordinate...
... nel mio esempio ci sono solo due DIV di cui uno prende il posto dell'altro, ed è sempre tutto in chiaro e nella pagina HTML...
... >> http://www.zspace.it/kolasim/wsx5_v8/clone/radioAnswersSKY_K.html
... quello che vale per un DIV lo vale anche per N DIV, ...non hai limiti...
.
... con un copia incolla editando direttamente in linea, ho modificato la precedente HOME, che era vuota, inserendo i DIV CUSTOM impilati...
.
ciao
Autore
Grazie kol, vedo solo ora la tua risposta e proverò anche con il tuo nuovo esempio ma...
La vedo dura, non è proprio il mio pane.
Nel frattempo in rete, ho trovato anche lo script allegato di seguito che similmente a quello da me postato precedentemente "lavora bene solo su singola immagine".
In ogni caso, e per quanto possa valere il mio parere, sembrerebbe che si debba creare un "container" che raggruppi le immagini per poi allineare i div in un'unica cella con i fogli di stile.
Mi chiedevo inoltre: ma se lo scopo è quello di far apparire e scomparire in sovrapposizione delle immagini "PNG" con delle trasparenze che lascino intravedere i livelli inferiori, non starò impazzendo per niente vero?
<script src="js/jquery-1.4.2.min.js"></script>
<style media="screen">
body{
background-color:#FFFFFF;
margin:0;
padding:0;
font-family:Georgia, "Times New Roman", Times, serif;
font-size:14px;
}
#img{display:block}
</style>
<div id="id1">Fade in</div>
<div id="id2">Fade out</div>
<img src="http://www.picgifs.com/wallpapers/cars/audi-tt/wallpaper_audi-tt_animaatjes-9.jpg" alt="name="patata" width="378" height="517" id="img" style="" />
<script type="text/javascript">
$('#id1').click(function() {
$('#img').fadeIn('slow');
});
$('#id2').click(function() {
$('#img').fadeOut('slow');
});
</script>
....Pensare che con flash me la sarei cavata con qualche fotogramma
Bah! Se e quando hai tempo : ( Buona serata!
... son d'accordo con te, con SwishMax sarebbe immediato e 100 volte meglio e flessibile, ed incorporabile in WebSiteX5 con un semplice click...
... comunque, nel mio primo esempio, nella HOME che era vuota ho apportato modifiche quasi immediate, con il semplice Copia/Incolla direttamente in rete, e gli stessi DIV CUSTOM:
>> http://www.zspace.it/kolasim/website/divsino2K/index.html
... come vedi dal codice, è semplicissimo, e senza il jQuery presente nel tuo codice, che sta riscoprendo l'acqua calda...
... devi solo smanettarci un pochino, pochino...
... io non posso, ma se indichi la fonte di quegli script, Mirko e Skeggia che si prestano alle implementazioni extra, potrebbero darti qualche indicazione...
.
ciao
Autore
Woooooooooooow! Ma è semplicemente fantasticooo!
Dovrei poter sostituire le icone immagini ai bottoni e il gioco è fatto...
Temevo che la suddivisione delle celle creata da ws ne impedisse la realizzazione ed invece, direi proprio che ci siamo. Non vedo l'ora di poterci smanettare al più presto e di mostrarvi il risultato di ciò a cui sto lavorando....
Per il momento assegno un bel "corret" a chiusura dell'argomento e... non è detto che non possa coinvolgervi sul serio dal punto di vista professionale qualora il tutto potrà procedere.
Non so voi ma personalmente di questi tempi, sto facendo davvero una gran fatica....
Grazieeeeeee : )))