Afficher/cacher des div en JS [Résolu/Fermé]

Signaler
-
Messages postés
51
Date d'inscription
jeudi 9 janvier 2014
Statut
Membre
Dernière intervention
28 avril 2014
-
Bonjour,

Je suis confronté au problème suivant;
J'ai deux div (qui contiennent un include en PHP) qui doivent être affichés (soit l'un soit l'autre) en fonction de l'image sur laquelle l'on presse. En arrivant sur la page ces containers sont masqués ... Malgré mes nombreuses tentatives, je n'y parvient pas ... Pourriez-vous m'aider ?

Voici mon script JS :
    <script>  
        function image1()  
        {  
                document.getElementById("page1").style.display="block";  
                document.getElementById("page2").style.display="none";  
        }  
        function image2()  
                document.getElementById("page1").style.display="none";  
                document.getElementById("page2").style.display="block";  
        }  
    </script> 

Et dans le body j'ai les deux images :

<a onClick="image1();"><img src="image1.png"></a>  
<a onClick="image2();"><img src="image2.png"></a>


Et à l'endroit où doivent s'afficher les containers :
<div id="page1" style="display:none;" >  
        <?php include('chemin/mapage1.php'); ?>  
</div>  
<div id="page2" style="display:none;" >  
        <?php include("chemin/mapage2.php"); ?>  
</div>


Pour info : Si j'écris directement "block" dans le style du <div>, ça fonctionne !

Ou est-ce que je fait faux ? Manque-t-il quelque chose ?


Merci !

3 réponses

Messages postés
5358
Date d'inscription
dimanche 3 février 2008
Statut
Membre
Dernière intervention
13 février 2017
876
salut,

<script type="text/javascript">  
        function afficher_div(image) 
        {  
			switch(image){
					case 'image1':
						document.getElementById("page1").style.display="block";  
						document.getElementById("page2").style.display="none"; 
					break;
					case 'image2':
						document.getElementById("page2").style.display="block";  
						document.getElementById("page1").style.display="none"; 
					break;
			}
        }  
        
    </script> 


Et dans le body j'ai les deux images :
<!-- si tu as 50 images tu ne vas pas faire 50 fonctions, alors utilises une seule fonction et passes lui en argument le nom de l'image cliquée -->
<a href="javascript:afficher_div('image1');"><img src="image1.png"></a>  
<a href="javascript:afficher_div('image2');"><img src="image2.png"></a>



Et à l'endroit où doivent s'afficher les containers :

<div id="page1" style="display:none;" >  
        <?php include('chemin/mapage1.php'); ?>  
</div>  
<div id="page2" style="display:none;" >  
        <?php include("chemin/mapage2.php"); ?>  
</div>
Ça fonctionne impéc. !!!
Merci beaucoup !!!

=DDD
Messages postés
51
Date d'inscription
jeudi 9 janvier 2014
Statut
Membre
Dernière intervention
28 avril 2014
10
Merci pour ce script
ça m a aidé