Afficher/cacher des div en JS

Résolu/Fermé

JS-div - Modifié par JS-div le 28/02/2013 à 20:16
conseil198 Messages postés 51 Date d'inscription jeudi 9 janvier 2014 Statut Membre Dernière intervention 28 avril 2014 - 6 févr. 2014 à 13:35

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 !

A voir également:

Afficher/cacher des div en JS
Application pour cacher des applications - Guide
Cacher conversation whatsapp - Guide
Afficher appdata - Guide
Afficher mot de passe wifi android - Guide
Comment cacher ses amis sur facebook - Guide

3 réponses

Réponse 1 / 3

Alain_42 Messages postés 5361 Date d'inscription dimanche 3 février 2008 Statut Membre Dernière intervention 13 février 2017 894
1 mars 2013 à 13:27

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>

Réponse 2 / 3

JS-div
1 mars 2013 à 17:41

Ça fonctionne impéc. !!!
Merci beaucoup !!!

=DDD

Réponse 3 / 3

conseil198 Messages postés 51 Date d'inscription jeudi 9 janvier 2014 Statut Membre Dernière intervention 28 avril 2014 13
6 févr. 2014 à 13:35

Merci pour ce script
ça m a aidé

Discussions similaires

code couleur associé a une image

Javascript Arrondi à 2 chiffres après la virgule

Afficher toutes les lignes masquées excel