Come aprire un popup dentro pagina html?

[Uninstall]

Ciao Nico,
grazie ancora per il tuo aiuto...

l'effetto che vorrei è proprio quello che mi hai messo come esempio (eliminando però le linee di bordo...ma credo siano eliminabili togliendo il valore border giusto?)
e se ho capito bene, agendo sui valori width e height, posso far apparire il testo ovunque io voglia sulla pagina.....bene,appurato questo....

ti faccio un altra domanda: vorrei che l effetto mouseover non sia dato dal testo "Passa col mouse sopra questo testo" ma sia dato dal click su un immagine.....quindi,posso integrare in una qualche maniera il testo (che fà visualizzare la scritta invisibile) all'interno di un immagine? magari mettendo l'immagine semplicemente sopra questo testo??
(credo sia semplice come cosa da risolvere...ma nel dubbio chiedo :-) )


ps: non ho ben capito se questo codice : <link rel='stylesheet' type='text/css' href='CSS/styles.css' /> lo debba "arricchire" di maggiori informazioni in merito alla descrizione del percorso del file css....mi spiego meglio: tu hai scritto 'CSS/styles.css' ma non dovrei scrivere qualcosa tipo C/documenti/sitoweb/css/styles.css ?????

Nel caso invece del primo codice, <link rel='stylesheet' type='text/css' href='styles.css' /> se ho capito bene lo devo usare nel caso abbia il file pagina.html dentro la stessa cartella styles.css è esatto? (chiedo sempre nel dubbio...)

GRAZIE ANCORA DI CUORE PER LO SBATTIMENTO!!!

ps: se non ti rispondo subito ti chiedo di scusarmi anticipatamente perchè vado qualche giorno in vacanza e non sò se riuscirò a controllare le email....

[nICO80]

eliminando però le linee di bordo...ma credo siano eliminabili togliendo il valore border giusto?

Esatto

e se ho capito bene, agendo sui valori width e height, posso far apparire il testo ovunque io voglia sulla pagina.....bene,appurato questo....

Width e height sono larghezza e altezza del rettangolo che contiene il testo. I valori di "margin" sono quelli che ti permettono di spostarlo.

ti faccio un altra domanda: vorrei che l effetto mouseover non sia dato dal testo "Passa col mouse sopra questo testo" ma sia dato dal click su un immagine.....quindi,posso integrare in una qualche maniera il testo (che fà visualizzare la scritta invisibile) all'interno di un immagine? magari mettendo l'immagine semplicemente sopra questo testo??
(credo sia semplice come cosa da risolvere...ma nel dubbio chiedo :-) )

Facilissimo! Invece di usare un <div> usi un <img>

Ad es.:

[img]immagine.jpg[/img]

ps: non ho ben capito se questo codice : <link rel='stylesheet' type='text/css' href='CSS/styles.css' /> lo debba "arricchire" di maggiori informazioni in merito alla descrizione del percorso del file css....mi spiego meglio: tu hai scritto 'CSS/styles.css' ma non dovrei scrivere qualcosa tipo C/documenti/sitoweb/css/styles.css ?????

Allora, puoi mettere un percorso assoluto (ovviamente relativo al sito web, non al tuo computer es: href="http://www.miosito.it/styles.css") oppure puoi mettere un percorso relativo alla cartella della pagina html.

Quindi se scrivi: href="styles.css" vuol dire che il file .css è nella stessa cartella del file .html, qualunque essa sia.
Se scrivi href="CSS/styles.css" vuol dire che il file .css è in una cartella chiamata CSS e che sta all'interno della cartella del file html.
Puoi anche "tornare indietro" nell'albero delle cartelle usando ..
Ad esempio: href = "../CSS/styles.css" vuol dire "sali di un livello, entra nella cartella CSS e cerca un file styles.css"

se non ti rispondo subito ti chiedo di scusarmi anticipatamente perchè vado qualche giorno in vacanza e non sò se riuscirò a controllare le email....

Buone vacanze allora!

[Uninstall]

cIAO nICO!!!! SONO TORNATO!!!!
grazie mille delle precisissime informazioni!!!! davvero sei stato grandioso....Adesso faccio delle prove e ti dico il prima possibile se il risultato è come voglio io.


ciao e grazie ancora !!!!!!!!!!!!!!!!!!!!!!

[Uninstall]

Ciao Nico.
stò provando il popup ma ho un problema....

il codice : [img]immagine.jpg[/img]
dove lo devo esattamente inserire?
perchè io l'ho inserito come puoi vedere sotto e "ovviamente" dà errore...credo di aver cancellato troppe cose.....

<html>
<head>
<link rel='stylesheet' type='text/css' href='css.css' />
</head>
<body>
[img]info2_01.jpg[/img]
<div id="popup" class="divNascosto">Questo testo è invisibile</div>
</body>
</html>

altra cosa:
ho notato che cambiando i valori margin sposto la zona dove appare il popup,...ma ho notato che lo spostamento è relativo alla scritta (o immagine) che viene cliccata...invece io vorrei che si spostasse relativamenter alla pagina intera come riferimento (tipo....a 100px in altezza e 100px in larghezza partendo dall angolo sinistro alto della pagina)

GRAZIE ANCORA!!!!!!!!!!

[Uninstall]

Nico ci sei?? HO BISOGNO DI TE !!!

[nICO80]

Ciao,
scusa il ritardo ma sono stato via tutta la settimana e non avevo il computer con me.

Il codice che hai scritto sembra esatto...

Che errore ti dà esattamente?

[Enzaccio]

Originariamente inviato da Uninstall
Ciao Nico,
../..
vorrei che l' effetto mouseover non sia dato dal testo "Passa col mouse sopra questo testo" ma sia dato dal click su un immagine ..... quindi, posso integrare in una qualche maniera il testo (che fà visualizzare la scritta invisibile) all'interno di un immagine? magari mettendo l'immagine semplicemente sopra questo testo??

Adopera onClick come gestore d' evento (event handler ) in luogo di onMouseOver
Tanto per non lasciarti solo sinché ritorna Nico, elaboro un esempio dall' utile modellino che hai postato sopra, ma non faccio aprire finestre pop-up; ti fai una prima idea di come funziona JavaScript:


&#60;html&#62;
&#60;head&#62;&#60;/head&#62;
&#60;body&#62;
&#60;img src="info2_01.jpg" onclick="document.getElementById('popup').style.display='block';"&#62;
&#60;div id="popup" style="display: none;"&#62;Questo testo è invisibile&#60;/div&#62;
&#60;/body&#62;
&#60;/html&#62;

Ho messo in-line sia lo style del div, che l' istruzione JavaScript
document.getElementById('popup').style.display='bl ock'; cui l' evento onClick da' esecuzione.

P.S.: Visualizzando l' Anteprima del post, noto che Nico è testè sopraggiunto ...

[Uninstall]

Originariamente inviato da nICO80
Ciao,
scusa il ritardo ma sono stato via tutta la settimana e non avevo il computer con me.

Il codice che hai scritto sembra esatto...

Che errore ti dà esattamente?

ciao nico e ben tornato!!!!!!!
l errore che ottengo è quello che vedi nell immagine allegata : una x al posto dell immagine e sotto la scritta fissa "questo testo è invisibile" e se passo sopra col mouse non succede nulla....tutto rimane fermo.



ps: mi puoi anche dare un idea di come risolvere anche questo problema:
ho notato che cambiando i valori margin sposto la zona dove appare il popup,...ma ho notato che lo spostamento è relativo alla scritta (o immagine) che viene cliccata...invece io vorrei che si spostasse relativamenter alla pagina intera come riferimento (tipo....a 100px in altezza e 100px in larghezza partendo dall angolo sinistro alto della pagina)


GRAZIE!!!!!!!!!!!

[Uninstall]

Originariamente inviato da Enzaccio
Adopera onClick come gestore d' evento (event handler ) in luogo di onMouseOver
Tanto per non lasciarti solo sinché ritorna Nico, elaboro un esempio dall' utile modellino che hai postato sopra, ma non faccio aprire finestre pop-up; ti fai una prima idea di come funziona JavaScript:


&#60;html&#62;
&#60;head&#62;&#60;/head&#62;
&#60;body&#62;
&#60;img src="info2_01.jpg" onclick="document.getElementById('popup').style.display='block';"&#62;
&#60;div id="popup" style="display: none;"&#62;Questo testo è invisibile&#60;/div&#62;
&#60;/body&#62;
&#60;/html&#62;

Ho messo in-line sia lo style del div, che l' istruzione JavaScript
document.getElementById('popup').style.display='bl ock'; cui l' evento onClick da' esecuzione.

P.S.: Visualizzando l' Anteprima del post, noto che Nico è testè sopraggiunto ...

ciao enzo.....provo subito!!!! grazie

[Enzaccio]

Il &#160; document.getElementById('qualeID') &#160; che ho impiegato, è un metodo JS tra i più affidabili in quanto contemplato da tutti Browser sin dall' epoca di IE 5
Vuole che si rispetti l' ID tra stringa JavaScript e Elemento HTML su cui deve intervenire.

A quanto capisco, tu hai più DIV da mostrare/nascondere e quindi assegnerai a ciascuno un diverso ID

L' in-line layout buono a scopo dimostrativo o per applicazioni basilari, comporta però degli inconvenienti quando si deve sviluppare un programma appena più complesso.
Per cui metteremo le istruzioni JS in una funzione, nella HEAD tra i Tag SCRIPT, e al gestore d' evento facciamo richiamare per nome questa funzione.
Quindi il tuo modello potrebbe diventare del tipo:


&#60;html&#62;
&#60;head&#62;

&#60;script&#62;

function mostra(quale){
&#160; document.getElementById(quale).style.display='block';
&#160; }
&#60;/script&#62;

&#60;/head&#62;
&#60;body&#62;
&#160; &#60;img src="info2_01.jpg" onclick="mostra('campo1')"&#62;
&#160; &#60;img src="info2_02.jpg" onclick="mostra('campo2')"&#62;
&#160; &#60;img src="info2_03.jpg" onclick="mostra('campo3')"&#62;
&#160; &#60;div id="campo1" style="display: none;"&#62;Testo Uno&#60;/div&#62;
&#160; &#60;div id="campo2" style="display: none;"&#62;Testo Due&#60;/div&#62;
&#160; &#60;div id="campo3" style="display: none;"&#62;Testo Tre&#60;/div&#62;

&#60;/body&#62;
&#60;/html&#62;


Nell' esempio faccio ricorso ad un' altra peculiarità: passo l' ID dal gestore d' evento alla funzione, un diverso ID da prendere in considerazione a seconda di quale immagine clicchi; quindi una singola funzione può servire più DIV.
Una parola di convenzione quale (senza apici) nella funzione, fa da veicolo (tiene il posto) al reale ID che le verrà trasmesso dall' onClick