Far comparire o scomparire dei div al clik del mouse

C

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.
 
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>
 
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.
 
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 ??
 
Ah ecco perchè avevo usato la tabella..
Clicca per allargare...

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>
 
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... :(
 
cambia img.length ( che non so cosa voglia dire ) con 10

o al massimo puoi contare tutte le immagini con getElementsByTagName('img')
 
Ultima modifica:
Pensavo che li vedesse come un array ....
Come devo usare il tuo codice ?
cosi : var conta = getElementByTagName('img')

e poi i < conta ?
 
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>
 
Scusa... :(
ma non avevo proprio pensato al .lenght finale.... a parte che mi ero anche dimenticato di mettere il document prima...
 
Devi accedere o registrarti per poter rispondere.

Discussioni simili

J
Far comparire e scomparire un div con un select
Risposte
1
Visite
3K
Javascript
Max 1
Max 1
M
Riadattamento funzioni per far scomparire un menu.
Risposte
4
Visite
1K
jQuery
megafrench
M
M
[Javascript] far scomparire il menu al click
Risposte
0
Visite
3K
Javascript
MartinaWeb_D
M
Shyson
Far apparire o scomparire div
Risposte
1
Visite
3K
jQuery
Altutto
A
L
Far apparire/scomparire un sottomenù al click
Risposte
1
Visite
2K
jQuery
criric
criric
P
Script per far scomparire l'input dopo aver premuto invio?
Risposte
8
Visite
3K
Javascript
ppigna
P
S
far scomparire dei link al click del mouse
Risposte
9
Visite
2K
Javascript
squalo9
S
asevenx
problema con funzione per far apparire e scomparire un form di commenti
Risposte
1
Visite
2K
PHP
borgo italia
borgo italia
otto9due
Al Click su optgroup di un select, far comparire le option annidate
Risposte
2
Visite
2K
jQuery
otto9due
otto9due
G
Ciclo if php per far comparire un pulsante solo nel caso in cui una variabile sia 0
Risposte
2
Visite
2K
PHP
Giancarlo Lupo
G
D
cliccare sul tasto per far comparire una scritta tipo
Risposte
0
Visite
1K
PHP
Domenico2013
D
I
come fare a far comparire il mio sito nelle ricerche??
Risposte
3
Visite
1K
SEO e Posizionamento
Ilaria93
I
G
far comparire un div
Risposte
2
Visite
2K
Javascript
Giovx24
G
F
E' possibile far comparire una scritta in un div al cambio di un valore di un form text???
Risposte
2
Visite
4K
Javascript
franco1706
F
D
Far comparire div al click
Risposte
0
Visite
9K
Javascript
djmatto
D
U
Far comparire ultimi topic nella homepage
Risposte
0
Visite
1K
PHP
ultrazzurra
U
R
Piacere di far parte di questa community
Risposte
0
Visite
438
Presentati al Forum
RobertaG
R
D
  • Bloccata
Devo far funzionare un form di contatti
Risposte
4
Visite
950
PHP
Max 1
Max 1
J
Far partire Angular
Risposte
1
Visite
1K
Javascript
Rikk73
Rikk73
MarcoGrazia
Se non sai se riceverai da GET o da POST, puoi verificarlo e far scegliere allo script.
Risposte
0
Visite
2K
Snippet PHP
MarcoGrazia
MarcoGrazia
Alto Basso