1 immagine per N pop-up

[MIG]

Il problema: ho un'area nella quale le immagini cambiano cliccando N numeri progressivi.

Se clicco 1 2 3 4 5 in un 'area definita vengono variate le n=5 immagini precaricate (funzione Change);

Accanto all'area nella quale verranno visualizzate le immagini ci sarà una immagine che permetterà l'apertura dell'immagine visualizzata in quell'istante all'interno dell'area definita (1,2,3,4,5): come posso assegnare a questo pulsante (immagine) l'apertura di quella particolare foto visualizzata?

In pratica:
clicco 1 --> visualizzo immagine 1
immagine 1 visualizzata--> pulsante pop-up=valore 1
se clicco pulsante pop-up=valore -->apertura finestra pop1

Grazie

[Mich_]

Non e` che abbia capito molto ....

Comunque per far partire una funzione JS, hai bisogno di un evento da applicare ad un bottone o ad un link (o area).

Esempi:

<input type="button" value="1" onClick="Change('1');" />
<input type="button" value="2" onClick="Change('2');" />
...

[img]uno.gif[/img]
...

<map ...>
<area shape="rect" .... onClick="Change('1');" />
...
</map>


Ciao
Michele

[MIG]

In effetti non sono stato troppo chiaro!
Il mio problema è questo:
per ogni soggetto ho 5 immagini.
Tramite la funzione change() a seconda che clicchi su 1,2,3,4,5 sostituisco l'immagine in un determinato punto. Quindi posso scorrere le 5 immagini dello stesso soggetto velocemente all'interno di un'area piuttosto limitata.
Ok.
Ora.
Se io volessi fare aprire in pop-up, quella immagine (es. la n. 3) che viene visualizzata cliccando sul numero 3 come posso fare?

Ovviamente sarebbe semplice assegnare la f(x) window.open a ciascun numero, ma logicamente vengono impiegati per sostituire le immagini.

In pratica dovrei creare una funzione di apertura pop-up a cui venga assegnato il valore dell'immagine che in quel momento è visualizzata, per poterla aprire.

Dammi qualche sputo!

Dovrei fare una funzione tipo:
if imagcambio = img1
allora window.open (pop-up1)
else
if imagcambio = img2
allora window.open (pop-up2)
....

dove 'imagcambio' è il nome dell'immagine stessa che assumerà valori 'img1','img2','img3',.... tramite la funzione change()---->questa parte già è funzionante!

Grazie

[Mich_]

Quella che tu chiami "funzione change()" e che dai per scontato che sia conosciuta, in realta` e` una funzione tua e non sappiamo come e` fatta ne` come opera.

Inoltre non ho capito se l'immagine deve apparire in una nuova finestra ogni volta, in una stessa finestra, in uno spazio nella pagina (che verrebbe suggerito dal nome della funzione change() ).

Negli esempi che ti avevo dato prima, e` esemplificato come passare dei parametri ad una funzione, per cui puoi chiamare la funzione passando come parametro il nome dell'immagine che vuoi aprire.

Ciao
Michele

[MIG]

Scusa se rompo di nuovo, ma non riesco a passare i parametri.

Ecco il codice javscript, riassunto

<script language="JavaScript">
<!--
img01= new Image()
img01.src = "../imgs/dx/num_1_off.gif"
img02 = new Image()
img02.src = "../imgs/dx/num_2_off.gif"
...... (fino immagine 5)


function Change(imageName,imageSrc) {
document.images[imageName].src = eval(imageSrc + ".src");
}

//-->
</script>

<script language="JavaScript">
function pop01() {
window.open("xxx1.html","","height=370,width=350,l eft=0,top=0");
}
function pop02() {
window.open("xxx2.html","","height=400,width=350,l eft=0,top=0");
}
funtion pop .... fino alla 05

</script>

NEL BODY
IMMAGINI 1,2,3,4,5 alle quali è associata la funzione change()

[img]../imgs/dx/num_1_off.gif[/img]

[img]../imgs/dx/num_2_off.gif[/img]

[img]../imgs/dx/num_3_off.gif[/img]

[img]../imgs/dx/num_4_off.gif[/img]

[img]../imgs/dx/num_5_off.gif[/img]


IMMAGINE "cambio" che viene sostitutita dalle img01,02,03,04,05 al click (come sopra)

[img]../imgs/clienti/num_1_off.gif[/img]

SE ALLA STESSA IMMAGINE volessi associare la possibilità di aprire un pop-up dovrei impostarla così:

[img]../imgs/clienti/num_1_off.gif[/img]

Ora: come posso fare affinchè cliccando sull'immagine 'cambio' che viene per esempio sostituita dall'immagine 2 si apra il pop-up n.2 che contiene l'ingrandimento dell'immagine 2 medesima??


Ecco come sto ragionando:

function pop(..??.) {
if imageSrc = 'img01' { window.open("xxx1.html","","height=370,width=350,l eft=0,top=0");
}
}


Grazie!

[Mich_]

Ora e` un po' piu` chiaro.

Anzitutto elimina quell'eval nell aprima istruzione: non serve, ti mangia un sacco di risorse ed in qualche browser non e` supportato:

function Change(imageName,imageSrc) {
document.images[imageName].src = imageSrc;
}

Poi modifica le chiamate inserendo il .src nella chiamata, ma togli gli apici attorno (devi passare l'oggetto, non il suo nome):
<a href="java script:Change('cambio', img01.src);" ...


Poi occorre sapere se esistono le pagine xxx1.htm e xxx2.htm.

In tal caso occorre passare il nome dell'immagine da aprire come parametro alla pagina:

function pop(imm) {
var nome = String(imm.src); // legge il nome dell'immagine presente nella img.
window.open("xxx1.html?imm="+nome,"popup","height= 370,width=350,left=0,top=0");
}

Dove la chiamata andrebbe fatta:
<a href="#" onClick="pop(cambio);return false;">

Nal codice della pagina xxx1.html occorre decodicficare il parametro passato ed usarlo per aprire l'immagine

[MIG]

Perfetto Grazie!

Solo una piccola cosa: nome cosa contiene?

nome=img01.src oppure nome=img01?

Mi piacerebbe aprire un pop up per ogni nome passato:
window.open(+nome+".html","popup","height=370,widt h=350,left=0,top=0");

Quindi avrò: img01.html, img02.html, img03.html ecc.

L'idea di utilizzare un solo pop-up xxx1.html è per me irrealizzabile: al caricamento dell'html dovrei eseguire una f(x) che recuperi il parametro passato dalla funzione e quindi fare assegnare a seconda del parametro l'immagine da visualizzare all'interno del pop-up stesso.

Forse meglio la prima ipotesi!

Quello che manca è il tempo!

Grazie

[Mich_]

Originariamente inviato da MIG
L'idea di utilizzare un solo pop-up xxx1.html è per me irrealizzabile: al caricamento dell'html dovrei eseguire una f(x) che recuperi il parametro passato dalla funzione e quindi fare assegnare a seconda del parametro l'immagine da visualizzare all'interno del pop-up stesso.
Grazie

Questo e` il modo di procedere piu` corretto e razionale.


Comunque la variabile nome contiene il nome del file contenuto nell'immagine.

Se vuoi "semplificare" (come lo dici tu), che mi pare invece un complicare lo script, dovresti passare il nome che vuoi, oppure salvarlo in una variabile apposita.

La variabile deve essere globale, quindi va definita fuori dalle funzioni:
var nomeimm='';

poi ogni volta che carichi un'immagine nella pagina devi anche caricarne il nome nella variabile:
nomeimm = ....;

quando hai necessita` di usarlo (nella funzione pop() ), vai a prelevarlo.

Spero di essermi spiegato (in effetti come spiegazione e` un po' contorta).

Ciao
Michele

[MIG]

ti ringrazio anticipatamente per le dritte ma come avrai notato non sono proprio un fico con javascript.

è mezza mattina che tento: dove sbaglio?

FUNZIONE CHANGE():

<script language="JavaScript">
<!--
var nomeimm=""; ---> la sintatassi mi pare ok (varibile vuota)
var nomeim="";
img01= new Image()
img01.src = "../imgs/dx/num_1_off.gif"
img02 = new Image()
img02.src = "../imgs/dx/num_2_off.gif"
img03= new Image()
img03.src = "../imgs/dx/num_3_off.gif"
......

HO AGGIUNTO LA VAR nomeimm ALL'EVENTO ONCLICK
function Change(imageName,imageSrc,nomeimm) {
document.images[imageName].src = imageSrc;
nomeim=nomeimm; ----> PASSO imm1 a nomeim
}


EVENTO CLICK
[img]../imgs/dx/num_1_off.gif[/img]


FUNZIONE POP():

<SCRIPT LANGUAGE="JavaScript">

HO AGGIUNTO LA VAR nomeim NELLA QUALE RIVERSO IL CONTENUTO DI nomeimm.

function pop(imm,nomeim) {
var nome = String(imm.src); // legge il nome dell'immagine presente nella img.
window.open("pop_lafoce/"+nomeim+".html","popup","height=370,width=350,lef t=0,top=0");
}
</script>

EVENTO ONCLICK DI APERTURA POP-UP:

[img]../imgs/dx/zoom_off.gif[/img]


PRATICAMENTE VORREI CHE PER IL POP-UP LA PATH FOSSE:
pop_lafoce/imm1.html
DA
window.open("pop_lafoce/"+nomeim+".html",.......


NON SO PIU' DOVE SBATTERE LA TESTA!

Grazie ciao

[Mich_]

Mi e` complesso seguire tuto lo script.
L'impostazione e` corretta, ma gli errori sono sempre in agguato (sia di sintassi che di altro tipo).

Dovresti inserire degli alert opportuni dentro il tuo script, per seguire cosa succede:

function Change(imageName,imageSrc,nomeimm) {
  document.images[imageName].src = imageSrc;
  nomeim=nomeimm; //----> PASSO imm1 a nomeim
  alert("funzione Change: nomeim contiene "+nomeim);
}

E similmente negli altri punti caldi.

Prova e poi fammi sapere.

Ciao
Michele