IdentifiantMot de passe
Loading...
Mot de passe oublié ?Je m'inscris ! (gratuit)
Navigation

Inscrivez-vous gratuitement
pour pouvoir participer, suivre les réponses en temps réel, voter pour les messages, poser vos propres questions et recevoir la newsletter

JavaScript Discussion :

affichage fonction onClick


Sujet :

JavaScript

  1. #1
    Membre averti
    Profil pro
    Inscrit en
    Avril 2007
    Messages
    55
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : Avril 2007
    Messages : 55
    Par défaut affichage fonction onClick
    Bonjour,

    J'ai un petit problème d'affichage avec ma fonction javascript onClick. Voici le code :

    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    58
    59
    60
    61
    62
    63
    64
    65
    66
    67
    68
    69
    70
    71
    72
    73
    74
    75
    76
    77
    78
    79
    80
    81
    82
    83
    84
    85
    86
    87
    88
    89
    90
    91
    92
    93
    94
    95
    96
    97
    98
    99
    100
    101
    102
    103
    104
    105
    106
    107
    108
    109
    110
    111
    112
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
    <html>
        <head>
            <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
            <link rel="stylesheet" media="screen" type="text/css" title="style" href="../css/style.css" />
            <title>Ogame Links</title>
     
            <script language="JavaScript">
                function affichage2(eltAafficher)
                {
                var eltAfficher = document.getElementById(eltAafficher);
                if (eltAfficher.style.visibility=="visible")
                    {
                        eltAfficher.style.visibility="hidden";
                    }
                else
                    {
                        eltAfficher.style.visibility="visible";
                    }
                }
            </script>
     
        </head>
        <body>
        <div id="en_tete">
        <!-- banniere -->
    	</div>
     
        <br />
        <div id="corps">
     
        <div class="image_corps_haut">            
        </div>
     
     
            <br />
            <center>
     
            <img src="../images/ogamelinks_07.jpg" width="69" height="60" alt="ogamelinks_07"/>
            <img src="../images/ogamelinks_08.jpg" width="700" alt="titre1" value="compte1" onclick="affichage2('un');"/> <br /><br />
     
            <div id="un" style="visibility:hidden">
            <table border="2" width="600">
                <thead>
                    <tr>
                        <th width="200">Nom</th>
                        <th width="300">Description</th>
                        <th width="100">Lien</th>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <td><center>Nom lien1</center></td>
                        <td><center>Description lien1</center></td>
                        <td><center>Lien1</center></td>
                    </tr>
                    <tr>
                        <td><center>Nom lien2</center></td>
                        <td><center>Description lien2</center></td>
                        <td><center>Lien2</center></td>
                    </tr>
                    <tr>
                        <td><center>Nom lien3</center></td>
                        <td><center>Description lien3</center></td>
                        <td><center>Lien3</center></td>
                    </tr>
                </tbody>
            </table>
            </div>
     
           <br /><br /><br />
           <img src="../images/ogamelinks_07.jpg" width="69" height="60" alt="ogamelinks_07"/>
           <img src="../images/ogamelinks_08.jpg" width="700" alt="titre1" value="compte1" onclick="affichage2('deux');"/> <br /><br />
     
           <div id="deux" style="visibility:hidden">
            <table border="2" width="600">
                <thead>
                    <tr>
                        <th width="200">Nom</th>
                        <th width="300">Description</th>
                        <th width="100">Lien</th>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <td><center>Nom lien1</center></td>
                        <td><center>Description lien1</center></td>
                        <td><center>Lien1</center></td>
                    </tr>
                    <tr>
                        <td><center>Nom lien2</center></td>
                        <td><center>Description lien2</center></td>
                        <td><center>Lien2</center></td>
                    </tr>
                    <tr>
                        <td><center>Nom lien3</center></td>
                        <td><center>Description lien3</center></td>
                        <td><center>Lien3</center></td>
                    </tr>
                </tbody>
            </table> <br><br><br>
     
            </div>
     
            <div class="image_corps_bas">
            </div>
     
            </center>
     
    	</div>
        </body>
    </html>

    En fait quand je clique sur les images mes divs s'affichent et se cachent bien correctement ca c'est nikel

    Par contre le problème c'est que quand les div sont cachées il y a un gros espace blanc entre mes deux images, or je voudrais justement que quand les divs sont cachées les images soient collées et quand les div apparaissent alors elles s'intègrent entre les images. Quelqu'un a-t-il une idée pour résoudre se problème?

    Merci d'avance,

  2. #2
    Membre Expert Avatar de franculo_caoulene
    Profil pro
    Inscrit en
    Octobre 2003
    Messages
    2 880
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : Octobre 2003
    Messages : 2 880
    Par défaut
    Salut,

    Je n'ai pas testé, mais plutôt que d'utiliser style.visibility essaye style.display="none" ou "".

  3. #3
    Membre confirmé
    Profil pro
    Inscrit en
    Septembre 2005
    Messages
    102
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : Septembre 2005
    Messages : 102
    Par défaut
    Je confirme display='none' pour masquer et idsplay='block' ou 'inline' pour afficher.. ce qui devrait te donner un truc du genre (pas testé)

    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    58
    59
    60
    61
    62
    63
    64
    65
    66
    67
    68
    69
    70
    71
    72
    73
    74
    75
    76
    77
    78
    79
    80
    81
    82
    83
    84
    85
    86
    87
    88
    89
    90
    91
    92
    93
    94
    95
    96
    97
    98
    99
    100
    101
    102
    103
    104
    105
    106
    107
    108
    109
    110
    111
    112
    113
     
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
    <html>
        <head>
            <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
            <link rel="stylesheet" media="screen" type="text/css" title="style" href="../css/style.css" />
            <title>Ogame Links</title>
     
            <script language="JavaScript">
                function affichage2(eltAafficher)
                {
                var eltAfficher = document.getElementById(eltAafficher);
                if (eltAfficher.style.display=="block")
                    {
                        eltAfficher.style.display="none";
                    }
                else
                    {
                         eltAfficher.style.display="block";
                    }
                }
            </script>
     
        </head>
        <body>
        <div id="en_tete">
        <!-- banniere -->
    	</div>
     
        <br />
        <div id="corps">
     
        <div class="image_corps_haut">            
        </div>
     
     
            <br />
            <center>
     
            <img src="../images/ogamelinks_07.jpg" width="69" height="60" alt="ogamelinks_07"/>
            <img src="../images/ogamelinks_08.jpg" width="700" alt="titre1" value="compte1" onclick="affichage2('un');"/> <br /><br />
     
            <div id="un" style="visibility:hidden">
            <table border="2" width="600">
                <thead>
                    <tr>
                        <th width="200">Nom</th>
                        <th width="300">Description</th>
                        <th width="100">Lien</th>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <td><center>Nom lien1</center></td>
                        <td><center>Description lien1</center></td>
                        <td><center>Lien1</center></td>
                    </tr>
                    <tr>
                        <td><center>Nom lien2</center></td>
                        <td><center>Description lien2</center></td>
                        <td><center>Lien2</center></td>
                    </tr>
                    <tr>
                        <td><center>Nom lien3</center></td>
                        <td><center>Description lien3</center></td>
                        <td><center>Lien3</center></td>
                    </tr>
                </tbody>
            </table>
            </div>
     
           <br /><br /><br />
           <img src="../images/ogamelinks_07.jpg" width="69" height="60" alt="ogamelinks_07"/>
           <img src="../images/ogamelinks_08.jpg" width="700" alt="titre1" value="compte1" onclick="affichage2('deux');"/> <br /><br />
     
           <div id="deux" style="visibility:hidden">
            <table border="2" width="600">
                <thead>
                    <tr>
                        <th width="200">Nom</th>
                        <th width="300">Description</th>
                        <th width="100">Lien</th>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <td><center>Nom lien1</center></td>
                        <td><center>Description lien1</center></td>
                        <td><center>Lien1</center></td>
                    </tr>
                    <tr>
                        <td><center>Nom lien2</center></td>
                        <td><center>Description lien2</center></td>
                        <td><center>Lien2</center></td>
                    </tr>
                    <tr>
                        <td><center>Nom lien3</center></td>
                        <td><center>Description lien3</center></td>
                        <td><center>Lien3</center></td>
                    </tr>
                </tbody>
            </table> <br><br><br>
     
            </div>
     
            <div class="image_corps_bas">
            </div>
     
            </center>
     
    	</div>
        </body>
    </html>

  4. #4
    Membre averti
    Profil pro
    Inscrit en
    Avril 2007
    Messages
    55
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : Avril 2007
    Messages : 55
    Par défaut
    Désormais j'ai :

    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    58
    59
    60
    61
    62
    63
    64
    65
    66
    67
    68
    69
    70
    71
    72
    73
    74
    75
    76
    77
    78
    79
    80
    81
    82
    83
    84
    85
    86
    87
    88
    89
    90
    91
    92
    93
    94
    95
    96
    97
    98
    99
    100
    101
    102
    103
    104
    105
    106
    107
    108
    109
    110
    111
    112
    113
    114
     
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
    <html>
        <head>
            <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
            <link rel="stylesheet" media="screen" type="text/css" title="style" href="../css/style.css" />
            <title>Ogame Links</title>
     
            <script language="JavaScript">
                function affichage2(eltAafficher)
                {
                var eltAfficher = document.getElementById(eltAafficher);
                if (eltAfficher.style.display=="block")
                    {
                        eltAfficher.style.display="none";
                    }
                else
                    {
                        eltAfficher.style.display="block";
     
                    }
                }
            </script>
     
        </head>
        <body>
        <div id="en_tete">
        <!-- banniere -->
    	</div>
     
        <br />
        <div id="corps">
     
        <div class="image_corps_haut">            
        </div>
     
     
            <br />
            <center>
     
            <img src="../images/ogamelinks_07.jpg" width="69" height="60" alt="ogamelinks_07"/>
            <img src="../images/ogamelinks_08.jpg" width="700" alt="titre1" value="compte1" onclick="affichage2('un');"/> <br /><br />
     
            <div id="un" style="visibility:hidden">
            <table border="2" width="600">
                <thead>
                    <tr>
                        <th width="200">Nom</th>
                        <th width="300">Description</th>
                        <th width="100">Lien</th>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <td><center>Nom lien1</center></td>
                        <td><center>Description lien1</center></td>
                        <td><center>Lien1</center></td>
                    </tr>
                    <tr>
                        <td><center>Nom lien2</center></td>
                        <td><center>Description lien2</center></td>
                        <td><center>Lien2</center></td>
                    </tr>
                    <tr>
                        <td><center>Nom lien3</center></td>
                        <td><center>Description lien3</center></td>
                        <td><center>Lien3</center></td>
                    </tr>
                </tbody>
            </table>
            </div>
     
           <br /><br /><br />
           <img src="../images/ogamelinks_07.jpg" width="69" height="60" alt="ogamelinks_07"/>
           <img src="../images/ogamelinks_08.jpg" width="700" alt="titre1" value="compte1" onclick="affichage2('deux');"/> <br /><br />
     
           <div id="deux" style="visibility:hidden">
            <table border="2" width="600">
                <thead>
                    <tr>
                        <th width="200">Nom</th>
                        <th width="300">Description</th>
                        <th width="100">Lien</th>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <td><center>Nom lien1</center></td>
                        <td><center>Description lien1</center></td>
                        <td><center>Lien1</center></td>
                    </tr>
                    <tr>
                        <td><center>Nom lien2</center></td>
                        <td><center>Description lien2</center></td>
                        <td><center>Lien2</center></td>
                    </tr>
                    <tr>
                        <td><center>Nom lien3</center></td>
                        <td><center>Description lien3</center></td>
                        <td><center>Lien3</center></td>
                    </tr>
                </tbody>
            </table> <br><br><br>
     
            </div>
     
            <div class="image_corps_bas">
            </div>
     
            </center>
     
    	</div>
        </body>
    </html>
    Au niveau de l'espacement entre les images c'est en effet bien géré donc merci

    Par contre le teste ne s'affiche plus :S Vous savez pourquoi? Je pensais peut-être à :

    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    <div id="un" style="visibility:hidden">
    En tout cas merci

  5. #5
    Membre Expert Avatar de franculo_caoulene
    Profil pro
    Inscrit en
    Octobre 2003
    Messages
    2 880
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : Octobre 2003
    Messages : 2 880
    Par défaut
    Teste plutôt si le display est à "none". Un display n'est pas forcément à "block", il peut être à "" qui est l'état naturel de l'élément.

  6. #6
    Membre averti
    Profil pro
    Inscrit en
    Avril 2007
    Messages
    55
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : Avril 2007
    Messages : 55
    Par défaut
    Voila j'ai suivi tes conseils et j'ai modifié :

    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    <script language="JavaScript">
                function affichage2(eltAafficher)
                {
                var eltAfficher = document.getElementById(eltAafficher);
                if (eltAfficher.style.display=="block")
                    {
                        eltAfficher.style.display="none";
                    }
                else
                    {
                        eltAfficher.style.display="block";
     
                    }
                }
            </script>
    et j'ai trouvé comment faire : il faut changer dans les <div> visibility:hidden par display:none.

    Merci pour votre aide

+ Répondre à la discussion
Cette discussion est résolue.

Discussions similaires

  1. la fonction onclick
    Par m_jaz3 dans le forum Général JavaScript
    Réponses: 2
    Dernier message: 07/06/2008, 13h48
  2. fonction onclick ignorée
    Par raimo dans le forum Général JavaScript
    Réponses: 10
    Dernier message: 16/05/2008, 21h23
  3. fonction onClick= dans IE6 ok Firefox fonctionne pas
    Par rejy_l'Édimestre dans le forum Balisage (X)HTML et validation W3C
    Réponses: 3
    Dernier message: 06/08/2007, 21h58
  4. Surchage de la fonction onClick d'un lien
    Par zizou39 dans le forum Général JavaScript
    Réponses: 13
    Dernier message: 25/01/2007, 14h47
  5. utilisation de la fonction onclick
    Par xave dans le forum Général JavaScript
    Réponses: 8
    Dernier message: 23/08/2005, 17h26

Partager

Partager
  • Envoyer la discussion sur Viadeo
  • Envoyer la discussion sur Twitter
  • Envoyer la discussion sur Google
  • Envoyer la discussion sur Facebook
  • Envoyer la discussion sur Digg
  • Envoyer la discussion sur Delicious
  • Envoyer la discussion sur MySpace
  • Envoyer la discussion sur Yahoo