Come aprire un popup dentro pagina html?

[Uninstall]

Ciao regà.
mi trovo nuovamente al vostro cospetto per chiedervi il solito aiutino....

Ho realizzato una pagina html molto semplice...
una pagina divisa a metà: da una parte c'è del testo e delle immagini, dall'altra metà c'è dello spazio vuoto.

il problema che ho è questo:
vorrei che cliccando su un immagine nel lato della pagina dove c'è il testo e le foto, nel lato della pagina dove non c'è nulla appaia un popup (o riquadro informativo) con del semplicissimo testo descrittivo.
Se invece clicco su un altra immagine, apparirà nello stesso spazio il riquadro descrittivo relativo a quest immagine.

Non ho idea se si debba usare java o altro....

Ps: non voglio aprire un popup esterno alla finestra che visualizza la pagina.....ma voglio che questo popup appaia dentro la pagina in questione.

Vi ringrazio da subito per qualsiasi consiglio (o se avete dei codici html o altro, che potete passarmi, ben benga!!!!!)

CIAO!!!!!!!!!!!

[alexba64]

Potresti utilizzare javascript adattando l'esempio alle tue esigenze

[Uninstall]

Grazie mille....stò guardando e a grandi linee vorrei uan cosa di questo tipo...ma il problema è che non mi è molto chiaro come sfruttarlo.....nonostante ptovi a tradurre il contenuto della pagina in inglese per capirci meglio, trovo difficoltà a capire dove debba incollare i codici che vengono dati.....uno lo devo mettere dentro l HEAD e vabene....ma gli altri 2 (o forse solo uno????) non l ho capito proprio.....mi potresti dare una mano nell inquadrare meglio la cosa per favore?

PS: HO PROVATO AD INCOLLARE SEMPRE NELLA STESSA PAGINA IL SECONDO CODICE DENTRO UNO SPAZIO html e il risultato è una scritta che se cliccata (e dopo aver messso il nome della pagina che vorrei che apparisse) non mi apre nulla....

ARGGGGGG !!!!! help me please!


GRAZIE ANCORA!!!!

[nICO80]

In pratica metti uno stile display:none all'elemento che deve apparire e poi con javascript cambi questo stile a display:block

Ad es:

<div onmouseover="document.getElementById('popup').style.display='block';" onmouseout="document.getElementById('popup').style.display='none';">Passa col mouse sopra questo testo</div>
<div id="popup" style="display:none">Questo testo è invisibile</div>

Conta che questo è un esempio molto "rozzo"... sarebbe già un po' migliorato con questi cambiamenti:
1) non mettere gli stili nell'HTML ma definire degli stili CSS (che possono essere cambiati in JS tramite l'attributo className)
2) non mettere il codice JS nell'HTML ma metterlo in una funzione in un file js a parte, che verrà incluso all'inizio (con un tag script). Nel onmouseover/out richiami solo la funzione.

E' una situazione un po' simile a quello che spiegavo qui (lascia perdere che lì la pagina è generata in PHP, l'idea è sempre la stessa):
http://forum.html.it/forum/showthrea...readid=1304509

[Uninstall]

Ciao Nico,perdona l'assoluta ignoranza in materia ma la risposta che mi hai dato per me sfiora l'arabeggiante :-)

Mi puoi spiegare un pò meglio (se possibile passo dopo passo....) dove dovrei incollare il codice che mi hai segnalato?

Ho bisogno di seguire una procedura passo dopo passo perchè se mi parlate di java ajax e chi più ne ha più ne metta.....non ci capisco davvero una mazza.
Non sò una cosa del tipo: apri la pagina dove vuoi far apparire il popup...inserisìci l'immagine da linkare al popup...nello HEAD della pagina scrivi questo e quest'altro....e se clicchi sull immagine apparirà il popup dove desideri che appaia sulla pagina....qualcosa così.


SCUSATEMI ANCORA...ma qui avete a che fare con un IGNORANTE VVoVe:

[nICO80]

Copia semplicemente quel codice in un file HTML e aprilo in un browser!


PS: Javascript e Java sono due cose molto differenti!

[Uninstall]

Ok nico...ci siamo quasi !!!!!!!!

diciamo che adesso però il testo che appare lo vorrei , non poco sotto la scritta che vado a cliccare...,ma TRASLATO DA UN ALTRA PARTE DELLA PAGINA STESSA......

diciamo che la scritta da cliccare la vorrei a destra della pagina in un punto qualsiasi.....mentre la scritta che deve apparire (quella invisibile), vorrei che uscisse fuori sul lato sinistro della pagina...ad una certa altezza e rispetto al bordo estremo del browser ECC ECC


è possibile? e come?


dai che ci sono quasi...GRAZIE!!!!!!

[nICO80]

Quello è solo un problema di come generi la pagina.

Io ho usato due div che sono degli elementi che indicano una sezione di un testo (div sta per "division"), quindi di default vengono messi uno sotto l'altro.

Puoi però cambiarne gli stili CSS in modo che siano posizionati in modo diverso (ti consiglio di leggere qualche tutorial sui CSS).

Ad es, potresti fare così (questa volta scrivo del codice un pochino più decente va...)

Innanzitutto mettiamo gli stili in un file esterno, che chiamiamo styles.css
Creo uno stile per ciascuno dei due div, il codice dovrebbe essere abbastanza facile da comprendere, se hai dubbi chiedi pure

.divNascosto
     {
     display:none;
     float:left;
     border: 1px solid gray;
     width: 100px;
     height: 100px;
     margin-left: 20px;
     margin-top: 10px;
     }

.altroDiv
     {
     display:block;
     float: right;
     border: 1px solid gray;
     width: 200px;
     height: 80px;
     margin-right: 50px;
     }

Poi, creiamo il nostro file html, in cui includiamo styles.css

<html>
<head>
<link rel='stylesheet' type='text/css' href='styles.css' />
</head>
<body>
<div onmouseover="document.getElementById('popup').style.display='block';" onmouseout="document.getElementById('popup').style.display='none';" class="altroDiv">Passa col mouse sopra questo testo</div>
<div id="popup" class="divNascosto">Questo testo è invisibile</div>
</body>
</html>

[Uninstall]

.divNascosto
     {
     display:none;
     float:left;
     border: 1px solid gray;
     width: 100px;
     height: 100px;
     margin-left: 20px;
     margin-top: 10px;
     }

.altroDiv
     {
     display:block;
     float: right;
     border: 1px solid gray;
     width: 200px;
     height: 80px;
     margin-right: 50px;
     }

Nico...aiutami a capire se ho capito:
io ho copiato il codice qui sopra dentro un file text e l'ho rinominato styles.css (e l'icona è cambiata ovviamente) (NB: ma non sò dove devo salvare tale file...in quale cartella?)

Poi,all'interno della pagina html sulla quale voglio far apparire il tutto,ho creato uno spazio separato di html dove ho incollato il codice qui sotto

<html>
<head>
<link rel='stylesheet' type='text/css' href='styles.css' />
</head>
<body>
<div onmouseover="document.getElementById('popup').style.display='block';" onmouseout="document.getElementById('popup').style.display='none';" class="altroDiv">Passa col mouse sopra questo testo</div>
<div id="popup" class="divNascosto">Questo testo è invisibile</div>
</body>
</html>

Ma così facendo ancora non ho ottenuto una cosa diversa dall'effetto di prima...cioè: vedo una frase nella pagina, che se cliccata fà apparire appena sotto la frase invisibile.
Sono sicuro che molto dipenda dal fatto che non ho ancora creato un legame tra il file css e il file html perchè magari non sono nella stessa cartella......

Mi puoi dire qualcosa in merito per favore?

ps: grazie ancora.,..mi stai aiutando molto....credo d'esser davvero vicino a ciò che voglio ottenere!!!!

[nICO80]

Questa riga:

<link rel='stylesheet' type='text/css' href='styles.css' />

E' quella che crea il legame con il css.
Siccome ho messo solo il nome del file vuol dire che il browser lo cercherà nella stessa cartella.

Se lo volessi mettere in un'altra cartella dovresti specificare il percorso ad es:

<link rel='stylesheet' type='text/css' href='CSS/styles.css' />

PS: questo è quello che dovresti vedere


nico