Far comparire o scomparire dei div al clik del mouse

cavaliere123

Utente Attivo
31 Lug 2012
416
0
16
Buonasera, ho messo su aiutandomi sempre in rete questo script per creare un visualizzatore di immagini che si ingrandiscono quando ci si clicca sopra, però vorrei far scomparire le altre immagini quando l'immagine scelta si ingrandisce... vi posto lo script :

HTML:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
  <meta content="text/html; charset=ISO-8859-1"
 http-equiv="content-type">
  <title></title>

<script language="javascript">

function mostra(var) {

e = document.getElementById("content").style.display="block";
f = document.getElementById("content1").style.display="block";
g = document.getElementById("content2").style.display="block";
    }

function nascondi(var) {

a = document.getElementById("content").style.display="none";
b = document.getElementById("content1").style.display="none";
c = document.getElementById("content2").style.display="none";
}

</script>


</head>

<body>
<div> 
<table style="text-align: left; width: 100%;" border="0"
 cellpadding="2" cellspacing="2">
  <tbody>
    <tr>
      <td><div align="center"; id="content2"> 
<img width="149" height="109" style="cursor: -moz-zoom-in;" src="dickinson.jpg" onclick="this.width=596;this.height=435; javascript:nascondi();" ondblclick="this.width=149;this.height=109; javascript:mostra();" title="titolo" alt="testo alternativo" /></div></td>
      <td><div align="center" id="content"> 
<img width="149" height="109" style="cursor: -moz-zoom-in;" src="newton.jpg" onclick="this.width=596;this.height=435;" ondblclick="this.width=149;this.height=109;" title="titolo" alt="testo alternativo" /></div></td>
      <td><div align="center" id="content1"> 
<img width="149" height="109" style="cursor: -moz-zoom-in;" src="Schopenhauer.jpg" onclick="this.width=596;this.height=435;" ondblclick="this.width=149;this.height=109; " title="titolo" alt="testo alternativo" /></div></td>
    </tr>
  </tbody>
</table></div>


<br />

</body>
</html>

prendendo in esame questa parte del codice :

HTML:
<div align="center"; id="content2"> 
<img width="149" height="109" style="cursor: -moz-zoom-in;" src="dickinson.jpg" onclick="this.width=596;this.height=435; javascript:nascondi();" ondblclick="this.width=149;this.height=109; javascript:mostra();" title="titolo" alt="testo alternativo" /></div>

chiaramente se clicco cosi come sta scompare anche l'immagine scelta.... ho pensato che magari passando alla funzione mostra () o nascondi() delle variabili che identificano solo quelle che devono essere nascoste dovrebbe andare bene, ma non so come si fa...
Altra opzione sarebbe di dire ogni volta alle funzioni quale escludere ma è sempre per logica... mi aiutate per favore.
Grazie in anticipo. Domenico.
 

criric

Super Moderatore
Membro dello Staff
SUPER MOD
MOD
21 Ago 2010
5.607
54
48
TN
Ciao,
dovresti impareare a tenere il codice un po piu ordinato, secondo me è fondamentale per programmare
language='javascript" non si usa piu mi sembra che te lo avevo gia scritto
Se usi le tabelle è inutile che usi i div e viceversa
se impari ad usare i css magari in un file esterno il codice sara ancora piu ordinato e pulito

detto questo io utilizzereri un ciclo for in questo modo

HTML:
<!DOCTYPE html>
<html>
    <head>
        <title></title>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <script type="text/javascript">
            function grande(img) {
                var elemento = document.getElementById(img);
                for(var i = 1; i < 4; i++) {
                    
                    if(img == "img" + i) {                        
                        elemento.style.width = 596 + "px";
                        elemento.style.height = 435 + "px";
                    }else{
                        document.getElementById("img" + i).style.display="none";
                    }
                }                
            }            
            function piccola(img) {
                var elemento = document.getElementById(img);
                for(var i = 1; i < 4; i++) {
                    
                    if(img == "img" + i) {                        
                        elemento.style.width = 149 + "px";
                        elemento.style.height = 109 + "px";
                    }else{
                        document.getElementById("img" + i).style.display="inline";
                    }
                }
            }
        </script>
        <style type="text/css">
            img {
                width:149px;
                height:109px;
                margin: 0 15px;
                cursor: -moz-zoom-in; /*vale solo per FF lo sai?*/
            }
        </style>
    </head>
    <body>
        <img id="img1" src="dickinson.jpg" onclick="grande(this.id);" ondblclick="piccola(this.id);" title="titolo" alt="testo alternativo" />
        <img id="img2" src="newton.jpg" onclick="grande(this.id);" ondblclick="piccola(this.id);" title="titolo" alt="testo alternativo" />
        <img id="img3" src="Schopenhauer.jpg" onclick="grande(this.id);" ondblclick="piccola(this.id);" title="titolo" alt="testo alternativo" />
    </body>
</html>
 

cavaliere123

Utente Attivo
31 Lug 2012
416
0
16
Grazie, come sempre gentilissimo e notevole :)

Hai ragione nel puntualizzarmi... ma non a scusante.. a volte aggiungo tanti elementi per delle mie prove e poi viene il caos, la prossima volta starò più attento...
Ho visto i codici : elemento.style.width = 596 + "px";

questo ad esempio non ci sarei mai arrivato... :(
Adesso me lo riporto nel mio corso personale cosi la prossima volta c'è l'ho davanti.
Grazie ancora... davvero. :)
Saluti Domenico.
 

cavaliere123

Utente Attivo
31 Lug 2012
416
0
16
Ah ecco perchè avevo usato la tabella.... perchè non si tratta solo di tre foto ma di più e vengono tre alla volta una sotto l'altra... :)

invece di mettere i < 4; se metto i < img.lenght va bene lo stesso ??
 

criric

Super Moderatore
Membro dello Staff
SUPER MOD
MOD
21 Ago 2010
5.607
54
48
TN
Ah ecco perchè avevo usato la tabella..

puoi comunque farne a meno delle tabelle
HTML:
        <div>
            <img id="img1" src="dickinson.jpg" onclick="grande(this.id);" ondblclick="piccola(this.id);" title="titolo" alt="testo alternativo" />
            <img id="img2" src="newton.jpg" onclick="grande(this.id);" ondblclick="piccola(this.id);" title="titolo" alt="testo alternativo" />
            <img id="img3" src="Schopenhauer.jpg" onclick="grande(this.id);" ondblclick="piccola(this.id);" title="titolo" alt="testo alternativo" />
        </div>
        <div>
            <img id="img4" src="dickinson.jpg" onclick="grande(this.id);" ondblclick="piccola(this.id);" title="titolo" alt="testo alternativo" />
            <img id="img5" src="newton.jpg" onclick="grande(this.id);" ondblclick="piccola(this.id);" title="titolo" alt="testo alternativo" />
            <img id="img6" src="Schopenhauer.jpg" onclick="grande(this.id);" ondblclick="piccola(this.id);" title="titolo" alt="testo alternativo" />
        </div>
        <div>
            <img id="img7" src="dickinson.jpg" onclick="grande(this.id);" ondblclick="piccola(this.id);" title="titolo" alt="testo alternativo" />
            <img id="img8" src="newton.jpg" onclick="grande(this.id);" ondblclick="piccola(this.id);" title="titolo" alt="testo alternativo" />
            <img id="img9" src="Schopenhauer.jpg" onclick="grande(this.id);" ondblclick="piccola(this.id);" title="titolo" alt="testo alternativo" />
        </div>
 

cavaliere123

Utente Attivo
31 Lug 2012
416
0
16
Scusami ancora ma ho aggiunto i dv cosi :

HTML:
<!DOCTYPE html>
<html>
    <head>
        <title></title>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <script type="text/javascript">
            function grande(img) {
                var elemento = document.getElementById(img);
                for(var i = 1; i < img.length; i++) {
                    
                    if(img == "img" + i) {                        
                        elemento.style.width = 596 + "px";
                        elemento.style.height = 435 + "px";
                    }else{
                        document.getElementById("img" + i).style.display="none";
                    }
                }                
            }            
            function piccola(img) {
                var elemento = document.getElementById(img);
                for(var i = 1; i < img.length; i++) {
                    
                    if(img == "img" + i) {                        
                        elemento.style.width = 149 + "px";
                        elemento.style.height = 109 + "px";
                    }else{
                        document.getElementById("img" + i).style.display="inline";
                    }
                }
            }
        </script>
        <style type="text/css">
            img {
                width:149px;
                height:109px;
                margin: 0 15px;
                }            }
        </style>
    </head>
    <body> 
        <div>
            <img id="img1" src="dickinson.jpg" onclick="grande(this.id);" ondblclick="piccola(this.id);" title="titolo" alt="testo alternativo" />
            <img id="img2" src="newton.jpg" onclick="grande(this.id);" ondblclick="piccola(this.id);" title="titolo" alt="testo alternativo" />
            <img id="img3" src="Schopenhauer.jpg" onclick="grande(this.id);" ondblclick="piccola(this.id);" title="titolo" alt="testo alternativo" />
        </div>
        <div>
            <img id="img4" src="dickinson.jpg" onclick="grande(this.id);" ondblclick="piccola(this.id);" title="titolo" alt="testo alternativo" />
            <img id="img5" src="newton.jpg" onclick="grande(this.id);" ondblclick="piccola(this.id);" title="titolo" alt="testo alternativo" />
            <img id="img6" src="Schopenhauer.jpg" onclick="grande(this.id);" ondblclick="piccola(this.id);" title="titolo" alt="testo alternativo" />
        </div>
        <div>
            <img id="img7" src="dickinson.jpg" onclick="grande(this.id);" ondblclick="piccola(this.id);" title="titolo" alt="testo alternativo" />
            <img id="img8" src="newton.jpg" onclick="grande(this.id);" ondblclick="piccola(this.id);" title="titolo" alt="testo alternativo" />
            <img id="img9" src="Schopenhauer.jpg" onclick="grande(this.id);" ondblclick="piccola(this.id);" title="titolo" alt="testo alternativo" />
        </div>
           
     </body>
</html>

e solo per la prima fila funziona che scompaiono gli altri due della stessa fila... se clicco su uno della seconda fila scompare tutta la terza fila, e per farla ricomparire devo ricliccare due volte su uno della seconda... :(
 

criric

Super Moderatore
Membro dello Staff
SUPER MOD
MOD
21 Ago 2010
5.607
54
48
TN
cambia img.length ( che non so cosa voglia dire ) con 10

o al massimo puoi contare tutte le immagini con getElementsByTagName('img')
 
Ultima modifica:

cavaliere123

Utente Attivo
31 Lug 2012
416
0
16
Pensavo che li vedesse come un array ....
Come devo usare il tuo codice ?
cosi : var conta = getElementByTagName('img')

e poi i < conta ?
 

criric

Super Moderatore
Membro dello Staff
SUPER MOD
MOD
21 Ago 2010
5.607
54
48
TN
Codice:
<script type="text/javascript">
            
            function grande(img) {
                var n = document.getElementsByTagName('img').length;           
                var elemento = document.getElementById(img);
                for(var i = 1; i <= n; i++) {
                    
                    if(img == "img" + i) {                        
                        elemento.style.width = 596 + "px";
                        elemento.style.height = 435 + "px";
                    }else{
                        document.getElementById("img" + i).style.display="none";
                    }
                }                
            }            
            function piccola(img) {
                var n = document.getElementsByTagName('img').length; 
                var elemento = document.getElementById(img);
                for(var i = 1; i <= n; i++) {
                    
                    if(img == "img" + i) {                        
                        elemento.style.width = 149 + "px";
                        elemento.style.height = 109 + "px";
                    }else{
                        document.getElementById("img" + i).style.display="inline";
                    }
                }
            }
        </script>
 

cavaliere123

Utente Attivo
31 Lug 2012
416
0
16
Scusa... :(
ma non avevo proprio pensato al .lenght finale.... a parte che mi ero anche dimenticato di mettere il document prima...
 
Discussioni simili
Autore Titolo Forum Risposte Data
J Far comparire e scomparire un div con un select Javascript 1
otto9due Al Click su optgroup di un select, far comparire le option annidate jQuery 2
G Ciclo if php per far comparire un pulsante solo nel caso in cui una variabile sia 0 PHP 2
D cliccare sul tasto per far comparire una scritta tipo PHP 0
I come fare a far comparire il mio sito nelle ricerche?? SEO e Posizionamento 3
G far comparire un div Javascript 2
F E' possibile far comparire una scritta in un div al cambio di un valore di un form text??? Javascript 2
D Far comparire div al click Javascript 0
U Far comparire ultimi topic nella homepage PHP 0
R Piacere di far parte di questa community Presentati al Forum 0
D Devo far funzionare un form di contatti PHP 4
J Far partire Angular Javascript 1
MarcoGrazia Se non sai se riceverai da GET o da POST, puoi verificarlo e far scegliere allo script. Snippet PHP 0
T Far sparire dalla pagina div che saranno inseriti successivamente jQuery 0
Shyson Far apparire le l'icona Back To Top in fondo jQuery 8
D [Java] far partire JProgressBar all'apertura di un JFrame Java 1
Monital [PHP]Far riconoscere stringa o numerico epr creazione campo tabella PHP 6
Q Problema su come far aggiornare i campi su un database Mysql PHP 17
W [PHP] Come far funzionare un form di selezione PHP 12
M Riadattamento funzioni per far scomparire un menu. jQuery 4
momeraths [HTML] Come non far scaricare video HTML e CSS 1
trattorino [Javascript] FAR sparire campo dopo top caratteri Javascript 2
T [Javascript] Far partire script al raggiungimento del div/section Javascript 0
M [PHP] Far rimanere biffata checkbox dopo aggiornamento pagina PHP 24
M [Javascript] far scomparire il menu al click Javascript 0
Bryan [PHP] Far mostrare tutte le tabelle contenenti in un database PHP 2
maurogiarrizzo È un piacere far parte di questo sito Presentati al Forum 1
C [PHP] DEVO FAR SPUNTARE SOLO LE CONSONANTI DI UNA STRINGA PHP 1
R Come faccio a far tradurre un mio video su Youtube? Social Media Marketing 2
SimooRu [PHP] Non riesco a far passare i dati con i form PHP 4
D script per far funzionare l'animazione Javascript 4
D script per far funzionare l'animazione Presentati al Forum 1
M Creazione codice html per far prelevare un banner HTML e CSS 3
M Far partire una funzione/codice php con javascript Javascript 1
S Far partire in automatico una slide all'apertura della pagina Javascript 0
U Far partire una funzione JavaScript premendo bottone in html Javascript 13
Mr. Alex D. Come far apparire un testo preimpostato in una casella di un form di uno script php? PHP 1
S Se voglio far scorrere le immagini dello sfondo di una pagina (oviamente html) come faccio? HTML e CSS 1
S Come faccio a far scorrere delle immagini come sfondo di una pagina? Discussioni Varie 1
I Far conoscere un sito SEO e Posizionamento 4
Shyson Far apparire o scomparire div jQuery 1
P far apparire immagine sotto testo con rollover Javascript 2
D Come far ripartire una gif quando si rivisita la pagina dello slideshow WordPress 1
K Far scorrere il menu dal fondo al top della pagina HTML e CSS 6
P Codice per far aprire un <div> al click di un immagine? HTML e CSS 0
piccino Far pubblicare un solo articolo WordPress 0
C Far apparire segno + PHP 1
G Come far passare un valore attraverso il metodo POST utiliazzando PHP a jQuery PHP 4
S Far scrivere un testo ad un utente registrato..... PHP 3
L Come far commentare/scrivere agli altri utenti?? Windows e Software 10

Discussioni simili