Forum des développeurs  

Le forum de référence en programmation et développement. Articles, cours et tutoriels du débutant au chef de projet et DBA confirmé.
Précédent   Forum des développeurs > Webmasters - Développement Web > JavaScript
Recharger cette page affichage fonction onClick (résolu)
S'inscrire Règles Tutoriels Chat (2) FAQ Calendrier Marquer les forums comme lus

JavaScript Forum programmation JavaScript. Lire Cours JavaScript, FAQ JavaScript et Sources JavaScript

Réponse
 
Outils de la discussion
Vieux 04/12/2008, 12h17   #1 (permalink)
Invité de passage
 
Date d'inscription: avril 2007
Messages: 8
Par défaut affichage fonction onClick (résolu)
Bonjour,

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

Code :
<!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">
    <!-- banniere -->
	</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,
Dernière modification par Foyus ; 04/12/2008 à 14h56
Foyus est déconnecté   Envoyer un message privé Réponse avec citation
Vieux 04/12/2008, 12h23   #2 (permalink)
Expert Confirmé Sénior
 
Avatar de franculo_caoulene
 
Date d'inscription: octobre 2003
Messages: 2 247
Par défaut
Salut,

Je n'ai pas testé, mais plutôt que d'utiliser style.visibility essaye style.display="none" ou "".
__________________
Penser à la recherche et au bouton
Five Stars Cleaning Co.
franculo_caoulene est déconnecté   Envoyer un message privé Réponse avec citation
Vieux 04/12/2008, 12h44   #3 (permalink)
Membre du Club
 
Date d'inscription: septembre 2005
Messages: 86
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 :
 
<!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">
    <!-- banniere -->
	</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>
 
oceanbigone est déconnecté   Envoyer un message privé Réponse avec citation
Vieux 04/12/2008, 14h15   #4 (permalink)
Invité de passage
 
Date d'inscription: avril 2007
Messages: 8
Par défaut
Désormais j'ai :

Code :
 
<!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">
    <!-- banniere -->
	</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 :
<div id="un" style="visibility:hidden">
En tout cas merci
Foyus est déconnecté   Envoyer un message privé Réponse avec citation
Vieux 04/12/2008, 14h39   #5 (permalink)
Expert Confirmé Sénior
 
Avatar de franculo_caoulene
 
Date d'inscription: octobre 2003
Messages: 2 247
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.
__________________
Penser à la recherche et au bouton
Five Stars Cleaning Co.
franculo_caoulene est déconnecté   Envoyer un message privé Réponse avec citation
Vieux 04/12/2008, 14h46   #6 (permalink)
Invité de passage
 
Date d'inscription: avril 2007
Messages: 8
Par défaut
Voila j'ai suivi tes conseils et j'ai modifié :

Code :
<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
Foyus est déconnecté   Envoyer un message privé Réponse avec citation
NEWS JAVASCRIPTF.A.Q JAVASCRIPTTUTORIELS JAVASCRIPTSSOURCES JAVASCRIPTLIVRESAJAX

Réponse

Précédent   Forum des développeurs > Webmasters - Développement Web > JavaScript
Recharger cette page affichage fonction onClick (résolu)



« Discussion précédente | Discussion suivante »
Outils de la discussion

Règles de messages
Vous ne pouvez pas créer de nouvelles discussions
Vous ne pouvez pas envoyer des réponses
Vous ne pouvez pas envoyer des pièces jointes
Vous ne pouvez pas modifier vos messages
Les balises BB sont activées : oui
Les smileys sont activés : oui
La balise [IMG] est activée : oui
Le code HTML peut être employé : non
Trackbacks are non
Pingbacks are non
Refbacks are non
Navigation rapide