<img class="masquer_menu" src="/static/phaseo2.png" name="oeil" />
<input type="button" value="" onclick="masquer_menu('menu');" id="hide_menu" class="masquer_menu2" title="Hide/Show Menu"/>
<script>
function masquer_menu(id)
{
	 if (document.getElementById(id).style.display == 'none') {
		   document.getElementById(id).style.display = 'block';
		   document.oeil.src="/static/phaseo2.png";
	  }
			  
	  else { 
		   document.getElementById(id).style.display = 'none';
		   document.oeil.src="/static/phasef2.png";
	   }
}
			
</script>

Alors voilà, j'essaye de faire un bouton pour masquer le menu déroulant de mon site, d'ailleurs j'ai réussi mais la méthode n'est pas très propre. En fait je souhaite changer l'image du bouton c'est à dire une flèche vers la gauche si le menu est ouvert et vers la droite si le menu est masqué. Pour celà j'ai mis une image et un bouton superposés avec les propriétés css class="masquer_menu"/"masquer_menu2" et j'ai ensuite réglé l'opacité de mon bouton à 0 avec la class="masquer_menu2" uniquement ( on voit plus le bouton mais l'image seulement du coup). Malheureusement en passant de mozilla à chrome j'ai le bouton qui se décale de l'image donc il faut appuyer à côté de l'image pour masquer le menu donc ce n'est pas propre ....

Grosso modo je veux mettre l'image en fond d'écran du bouton sachant que lorsqu'on clique sur le bouton on puisse accéder à la source de l'image pour la modifier.

Re,

Il semble que tu te complique inutilement les choses.

Tu peux faire ceci sans JS ; voici une petite démo:

EDIT: Code modifié (le 1er masquait au clic sur le menu)

Démo: http://jsbin.com/hosape/2/edit?html,css,output

<input type="checkbox" name="menu" id="chk1">
<label id="lab-chk1" for="chk1"></label>
<nav>
    menu A<br>
    menu B
</nav>

CSS

input{display:none;}

#lab-chk1 {
  display:block;
  border:2px solid grey;
  width:20px;
  height:30px; 
  background: url(https://dummyimage.com/20x30/86b2db/fff.png&text=%3E) no-repeat;
}


input:checked ~ #lab-chk1 {
  background-image:url(https://dummyimage.com/20x30/d94a94/fff.png&text=V);
}


nav {
  display:none;
}

#chk1:checked ~ nav {
  display:block;
}

 

-
Edité par philiga 11 mai 2018 à 16:40:27

Bonjour Skytchup,

Je ne suis pas forcément d'accord avec la solution de philiga,

car nav (menu pour toi) peut être à n'importe quel endroit, et avec sa solution cela ne fonctionne pas dans tous les cas

voila ce que je te propose exemple basic,

https://codepen.io/Zonecss/pen/VxxbNN

Ce pendant, tu risques d'avoir des problème avec le deuxième état, car il faut le temps que la deuxième image se charge

Pour palier a ce problème je t'invite aller voir la technique des sprites :

https://www.zonecss.fr/laboratoire-css/boutons-en-css.html

AliasDmc a écrit:

Je ne suis pas forcément d'accord avec la solution de philiga,

car nav (menu pour toi) peut être à n'importe quel endroit, et avec sa solution cela ne fonctionne pas dans tous les cas

Puisque l'input est le bouton qui commande nav, il n'y a pas de raison qu'il en soit distant et s'il y a plusieurs nav, il suffit d'ajouter une classe pour préciser laquelle commander, mais pourquoi faire simple quand on peut faire compliqué, n'est-ce pas ?

Bonjour philiga,

philiga a écrit:

Puisque l'input est le bouton qui commande nav, il n'y a pas de raison qu'il en soit distant et s'il y a plusieurs nav, il suffit d'ajouter une classe pour préciser laquelle commander, mais pourquoi faire simple quand on peut faire compliqué, n'est-ce pas ?

Je ne sais pas où est le nav (menu), donc si comme tu le dis "il n'y a pas de raison qu'il en soit distant" et bien Skytchup choisira peut être ta solution , sinon une autre ....

<img class="masquer_menu" src="/static/phaseo2.png" name="oeil" />
<button type="button" value="" onclick="masquer_menu('menu');" id="hide_menu" class="masquer_menu2" title="Hide/Show Menu"><img scr="/static/phaseo2.png"/></button>

function masquer_menu(id)
{
  if (document.getElementById(id).style.display == 'none') {
	   document.getElementById(id).style.display = 'block';
	   document.oeil.src="/static/phaseo2.png";
  }
  
  else { 
	   document.getElementById(id).style.display = 'none';
	   document.oeil.src="/static/phasef2.png";
  }
}
	

J'ai modifié mon code légèrement en regardant vos scripts et ça marche super comme ceci ! 

J'ai pas changé ma fonction, j'ai changé mon "input" en "bouton" et j'ai ré-arrangé mon css ! (je ne vous l'avais pas donné alors pour ça, vous ne pouviez pas me corriger ^^)

Merci à vous tout de même !

Problème résolu !