Discussion :

[Shogun31]

Bonjour, j'ai débuté le js ils n'y a pas très longtemps et je rencontre une difficulté au niveau de ma page web.

J'ai un menu qui apparaît lorsque je clic sur mon image et qui disparaît lorsque je re clic dessus, sauf que j'aimerais que quand le menu apparaisse ce soit mon image(verte) et quand je re clic sur mon image et qu'il n'y a pas de menu celui-ci affiche mon autre image(rouge)

Voici mon code qui permet de faire apparaitre et disparaitre mon menu:

Code html :

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
 
<div id="imagee" >	
			<img src="images/iconwifi.gif" id="img" width=130px height=130px alt="Menu" onclick="action1()"/></br>
</div>
 
	<script>
        
function action1()
{
   var changer = document.getElementById('navv'); /* On modifie le menu qui à l'id "navcontainer" */
 
  
   if (changer.style.display == 'none') /* s'il est invisible */
    {
        changer.style.display = 'block'; /* il devient visible */
    }
    else                                 /* sinon  */
    {
        changer.style.display = 'none'; /* s'il est visible alors il devient invisible */
    }
};
 
</script>

Je ne sais pas comment intégrer mon idée dans mon code sachant que le onclick aura deux fonctions à la fois.
Merci d'avance!

[Invité]

Bonjour,

• https://codepen.io/jreaux62/pen/rKMvPR

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
<img src="http://www.icône.com/images/icones/2/4/button-red.png" id="img" style="width:50px;height:50px;" alt="Menu" onclick="toggle_nav( this.id, 'navv' );"/>
 
<nav id="navv" style="display:none;">Navigation</nav>

Code JavaScript :

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
 function toggle_nav( id_img, id_nav)
{
   var img = document.getElementById( id_img ); /* image */
   var nav = document.getElementById( id_nav ); /* menu */
 
   if (nav.style.display != 'block') /* s'il est invisible */
    {
        img.src = 'http://www.icône.com/images/icones/2/4/button-green.png'; /* à adapter */
        nav.style.display = 'block'; /* visible */
    }
    else /* sinon  */
    {
        img.src = 'http://www.icône.com/images/icones/2/4/button-red.png'; /* à adapter */
        nav.style.display = 'none'; /* invisible */
    }
};

[Shogun31]

Super!! Merci beaucoup.