Visualizzare immagini da select + popup

[floyd46]

Ciao a tutti,
avrei bisogno, cortesemente, di uno script in js che visualizzi delle immagini da una select.
Ogni option ne dovrebbe mostrare una diversa.....
L'immagine dovrebbe apparire al di sotto della select stessa.

Una volta visualizzata l'immagine, al click su di essa, si dovrebbe aprire una popup ( che mostrerà del testo - in pratica è una pagina html).
Possibile avere qualche riferimento, o link, a tale script, se esiste?
Grazie
Floyd

[Enzaccio]

Intanto per "sgrossare" la prima parte posso farti lavorare un po' su questo:

<select name="" size="1" onchange="document.images['veduta'].src=this.value;">

 <option value=""                >scegli immagine
 <option value="path/gatto.jpg"  >gatto
 <option value="path/cane.jpg"   >cane
 <option value="path/cavallo.jpg">cavallo
</select>


[img][/img]

Originariamente inviato da floyd46
L'immagine dovrebbe apparire al di sotto della select stessa.

Il Tag IMG avente NAME="veduta" che fa da visualizzatore, puoi collocarlo come e dove vuoi nella pagina; JavaScript lo individuerà con l'istruzione di "percorso" document.images['veduta'] e quindi gli cambia il Valore di SRC dicendo: .src=this.value

L' indirizzo di ogni singola immagine lo metti come Valore di VALUE della OPTION
(indirizzo/url relativo o assoluto).

[floyd46]

ciao e grazie per questa prima parte dello script.
il problema è come fare per associare un link differente (popup) ad ogni immagine.
vedrò di sbatterci 1 pò la testa.
Floyd

[Enzaccio]

Originariamente inviato da floyd46
Una volta visualizzata l'immagine, al click su di essa, si dovrebbe aprire una popup ( che mostrerà del testo - in pratica è una pagina html).

Il Tag IMG si orienterebbe a diventare qualcosa del genere:

[img]defaultImage.jpg[/img]

come pure:

[img]defaultImage.jpg[/img]

che conserva la "manina-link" per avvertire del link quando ci si passa sopra, mentre BORDER="0" è per evitare il blu/violetto di bordatura sempre in quanto link; ma si potrebbe fare anche così:

[img]defaultImage.jpg[/img]

onclick="window.open('path/filename.html')" usato così "nudo e crudo" apre il file.html in nuova finestra a tutto schermo come avviene con A HREF
Ma window.open accetta anche dimensioni assegnate, e solo in pixel (non in % percentuale); che è appunto quello che credo vuoi intendere parlando di pop-up (Vedi anche top left scrollbars ed altre caratteristihe).
Nelle tre paia di apici (singoli o doppi) possiamo quindi inserire:
onclick="window.open('percorso_file_da_aprire', 'nome_popup', 'caratteristiche')"

Ora, dopo questa, spero chiarificatrice introduzione, quello che ti serve è di gestire il primo parametro percorso_file_da_aprire come variabile.

P.S.: Ti avverto anticipatamente che non puoi impedire alla barra indirizzi di apparire nella pop-up: location=no non viene più presa in considerazione dai più recenti Navigatori (già da IExplorer 7) per ragioni di sicurezza/antifrode.

[Enzaccio]

Originariamente inviato da floyd46
vedrò di sbatterci 1 pò la testa.

Questo, mantenendo una stessa immagine (fissa), già funziona; ti può essere di guida e merita qualche capocciata.
Il fatto è che appunto, specchio del precedente, impegna il VALUE delle OPTION che già usavamo per le immagini.

Nota che docurl come variabile (potresti anche chiamarla giorgio) recante gli URL dei file.html la dobbiamo introdurre (dichiarare) tra i Tag SCRIPT
poi, sempre all' evento ONCHANGE le assegnamo differenti Valori.
l' alert() è dimostrativo e lo puoi togliere.

Nota anche onclick="window.open(docurl)"
Quando un termine ha da essere interpretato come variabile, non deve essere introdotto da apici; che lo farebbero interpretare come stringa (carattere di testo).

<script type="text/javascript">
 var docurl = "xxx";
</script>

<select name="" size="1" onchange="docurl=this.value; alert(docurl)">

 <option value=""                      >scegli immagine
 <option value="http://www.google.com/">gatto
 <option value="http://forum.html.it/" >cane
 <option value="http://www.yahoo.com/" >cavallo
</select>

[Enzaccio]

Se ti torna acettabile di nominare i file di immagine e i corrispondenti file di testo/html con lo stesso nome
cat.jpg con cat.html
dog.jpg con dog.html
(cambia solamente l' estensione)
e di averli sullo stesso percorso/cartella, questa ti potrebbe tornare una interessante soluzione; non l' unica possibile, ma piuttosto semplice ed elegante:

<html>
<head>
<title>Image tied pop-up content</title>

<script type="text/javascript">

 var docurl = "default.html";

</script>

</head>
<body bgcolor="#9090A0">

 <h2>by Enzaccio </h2>

<select name="" size="1" onchange="document.images['veduta'].src = this.value+'.jpg'; 
                                                          docurl = this.value+'.html';">

 <option value="default">scegli immagine
 <option value="cat"    >gatto
 <option value="dog"    >cane
 <option value="horse"  >cavallo
</select>


[img]default.jpg[/img]

</body>
</html>

[floyd46]

ciao Enzaccio,
grazie infinite per il tuo sforzo ed impegno.
ho risolto diversamente in questo modo:

http://joomla15.extrowebsite.com/select/esempio.htm

ma terrò conto del tuo script se dovesse tornarmi utile.
Grazie ancora
Floyd