[Javascript] aiuto script visualizzatore immagini

Printable View

07-04-2010, 19.42.16
sevenjeak

[Javascript] aiuto script visualizzatore immagini

Salve,

Sto provando, per il mio sito, ha migliorare questo piccolo script da me realizzato:

http://sevenjeak.altervista.org/Prove/index.html

In poche parole lo script, quando clicchi sul nome dell'immagine ti si visualizza l'immagine, ma vorrei fare in modo che quando reclicchi sopra questa sparisce, insieme al suo contenitore, ho provato in tutti i modi, ma non riesco, come posso risolvere?

In oltre ho notato, che pur utilizzando la classe screen, per prendere la risoluzione mi si notano le barre di scorrimento, ho pensato che era normale visto che prende la risoluzione e non la dimensione del documento.

Ora vi chiedo, e possibile prendere la dimensione del documento o semplicemente mi conviene sottrarre le dimensione delle due barre di scorrimento?
07-04-2010, 20.53.54
EuroSalute

Ho fatto così, ma non so se a te va bene...ho aggiunto un <a href=''>

potresti fare una funzione close_image() e richiamarla con <a href='javascript: close_image();'>

Codice HTML:

<HTML> <HEAD> <META NAME="GENERATOR" Content="AlterVista - Editor HTML"> <TITLE>visualizzatore immagine</TITLE> <script type="text/javascript"> function look_img(image) { var contenitore = document.createElement("div"); contenitore.style.position = "absolute"; contenitore.style.top = "0px"; contenitore.style.left = "0px"; contenitore.style.width = screen.width + "px"; contenitore.style.height = screen.height + "px"; contenitore.style.background = "black"; contenitore.style.opacity = "0.75"; contenitore.style.textAlign = "center"; contenitore.innerHTML = "<br /><br /><br /><br /><br /><br /><br /><br /><br /><a href=''><img src='" + image + "' alt='' /></a>"; document.body.appendChild(contenitore); } </script> </HEAD> <BODY> <P> </P> </BODY> <h2>Lista immagini</h2> <ul> <li><a href="javascript:look_img('foto/utenti.gif');">Utenti</a></li> <li><a href="javascript:look_img('foto/guestbook.gif');">Gestbook</a></li> </ul> </HTML>
07-04-2010, 21.11.12
sevenjeak

Non era proprio quello che intendevo.

Cmq ho provato anche in questo modo, infatti prima di postare il codice sul forum avevo dato un id al contenitore con questa istruzione:

Codice HTML:

contenitore.setAttribute("id", "id_contenitore");

E ho creato questa funzione per la propria chiusura:

Codice HTML:

function close_img() { var contenitore = document.getElementById("id_contenitore"); document.body.removeChild("contenitore"); }

Non so, sbaglio io qualcosa o questo metodo non va bene?
08-04-2010, 00.07.16
EuroSalute

prova a dare al contenitore :

Codice HTML:

if (document.all || document.getElementById) contenitore.style.visibility = "visible"; else if (document.layers) contenitore.visibility ="show"; else if (document.div) contenitore.display='show';

e poi nel close_img()

Codice HTML:

if (document.all || document.getElementById) contenitore.style.display="none"; else if (document.layers) contenitore.visibility ="hide"; else if (document.div) contenitore.display='hide'; document.body.removeChild("contenitore");

Prova a guardare questo link:
http://www.guru4.net/articoli/javasc...ml-line-chart/
08-04-2010, 11.10.43
sevenjeak

Il codice aggiunto alla funzione look_img() funziona, ma non capisco che senso abbia rendere visibile in contenitore quando lo è già?

La funzione close_img() non funziona, scusa ma nel link postato c'è scritto come creare grafici, cosa centra con quello che voglio fare io?
08-04-2010, 14.07.28
EuroSalute

te l'ho risolto facendo così:

Codice HTML:

<HTML> <HEAD> <META NAME="GENERATOR" Content="AlterVista - Editor HTML"> <TITLE>visualizzatore immagine</TITLE> <script type="text/javascript"> function initAd(image) { adDiv = document.createElement("div"); adDiv.style.position = "absolute"; adDiv.style.top = "0px"; adDiv.style.left = "0px"; adDiv.style.width = screen.width + "px"; adDiv.style.height = screen.height + "px"; adDiv.style.background = "black"; adDiv.style.opacity = "0.75"; adDiv.style.textAlign = "center"; //qui ho aggiunto visibility adDiv.style.visibility = "visible"; adDiv.innerHTML = "<br /><br /><br /><br /><br /><br /><br /><br /><br /><a href='javascript:closeAd();'><img src='" + image + "' alt='' /></a>"; document.body.appendChild(adDiv); } function closeAd(){ // oppure adDiv.style.display = "none"; adDiv.style.visibility = "hidden"; adDiv.innerHTML = ""; //reset //per removeChild da un errore con ie8 //document.body.removeChild("adDiv"); } </script> </HEAD> <BODY> <P> </P> </BODY> <div id="sponsorAdDiv"> <h2>Lista immagini</h2> <ul> <li><a href="javascript:initAd('foto/utenti.gif');">Utenti</a></li> <li><a href="javascript:initAd('foto/guestbook.gif');">Gestbook</a></li> </ul> </div> </HTML>

Ti ho dato quel link perchè il tipo di codice usato è lo stesso che stai utilizzando tu, è solo per esempio.

:roll:
08-04-2010, 14.55.10
sevenjeak

Il fatto è che: se nascondi il div va tutto bene, ma se lo rimuovo con il removeChild() non capisco perché questo non funziona con nessun browser

Ma se nascondo il div è poi rieseguo la funzione look_img(), mi ricrea un nuovo div o il div che mi crea me lo sovrascrive al precedente? perché vorrei che il javascript non mi lasci in memoria tutti i div che io nascondo al posto di eliminare
08-04-2010, 15.42.01
javascripter

Io ti propongo una soluzione alternativa, usa un solo div senza cancellarlo e ricrearlo continuamente:

Codice HTML:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <title>visualizzatore immagine</title> <script type="text/javascript"> /* <![CDATA[ */ function openImg(image) { var ad = document.getElementById('adImg'); if(!ad) { ad = document.createElement('div'); ad.id = 'adImg'; ad.style.position = 'absolute'; ad.style.left = 0; ad.style.top = 0; ad.style.width = '100%'; ad.style.height = screen.height + 'px'; /* l'altezza è troppa, vedi qui: http://www.howtocreate.co.uk/tutorials/javascript/browserwindow per ottenere le dimensioni esatte */ ad.style.opacity = '0.75'; // cerca di trovare qualcosa cross-browser ad.style.background = '#000'; ad.style.textAlign = 'center'; document.body.appendChild(ad); } ad.style.visibility = 'visible'; ad.innerHTML = '<a style="position: relative; top: 50%" href="javascript:closeImg()"><img src="' + image + '" alt="" /></a>'; } function closeImg() { document.getElementById('adImg').style.visibility = 'hidden'; } /* ]]> */ </script> </head> <body> <h2>Lista immagini</h2> <ul> <li><a href="javascript:openImg('foto/utenti.gif');">Utenti</a></li> <li><a href="javascript:openImg('foto/guestbook.gif');">Gestbook</a></li> </ul> </body> </html>
08-04-2010, 15.55.31
EuroSalute

ti dico perchè non funziona il removeChild, perchè hai sbagliato la sintassi e io me ne sono solo accorto adesso:

avevi scritto : document.body.removeChild("adDiv"); <-- togli le virgolette

Codice HTML:

function closeAd(){ //adDiv.style.display = "none"; //adDiv.style.visibility = "hidden"; adDiv.innerHTML = "";//reset document.body.removeChild(adDiv); }
08-04-2010, 16.08.05
sevenjeak

Più che altro io volevo sapere, se entrambi i codici, sovrascrivono il div o creabo semplicemente un'altro div? se lo sovrascrivono o lo creano un'altro da dove lo posso capire?

Ed inoltre volevo sapere perché, in questo caso, non funziona il removeChild()?

P.S.: sto provando in questo momento a riscrivere il codice
08-04-2010, 16.11.46
EuroSalute

ma se ti ho appena detto dove era l'errore...

l'ho provato sul mio host e FUNZIONA!!!!

ciao....:lol:
08-04-2010, 16.32.05
sevenjeak

Scusa, ma quando ho iniziato a rispondere non credo che c'era la tuo risposta, cmq ora funzione, ed ho capito solo ora che la variabile div che ho inizializzato era riconosciuta solo all'interno della funzione.

Grazie a tutti e due
09-04-2010, 00.50.55
EuroSalute

Grazie per i ringraziamenti....

:!: