Change image with buttons

[Nic727]

Hi,

 

I have one image and 4 buttons. I would like to make that when I click on one button, it change the image source. Each button will put a different image.

 

That's the code I have right now and nothing work. I look on Internet, but can't find the right solution.

 

There is two solutions, but don't know how to do them.

 

1. Change the source of the image

 

2. Hide all image with CSS at first and display them with a click of the button and hide the image already here.

 

I tried the first solution, but doesn't seem to work.

<header><h1>Parcours d'un souvenir</h1></header><div class="image">	<img class="brain" id="brain" src="img/brain.gif" alt="Brain"></div><div class="text"></div><div class="boutons"><ul class="ranger1">	<li class="bouton bouton1" id="bouton1" onclick="changeImage()" ><h3>Encodage</h3></li>	<li class="bouton bouton2" id="bouton2" onclick="changeImage()" ><h3>Récupération</h3></li></ul><ul class="ranger2">	<li class="bouton bouton3" id="bouton3" onclick="changeImage()" ><h3>Stockage</h3></li>	<li class="bouton bouton4" id="bouton4" onclick="changeImage()" ><h3>Consolidation</h3></li></ul></div>

var bouton1 = document.getElementById('bouton1'); var bouton2 = document.getElementById('bouton2'); var bouton3 = document.getElementById('bouton3'); var bouton4 = document.getElementById('bouton4'); var image = document.getElementById('brain') function changeImage() {	if (bouton1==true){		image.src='img/brain1.gif'	}     }

I just tried for button1, but doesn't work.

[davej]

This makes no sense to me. Why are you testing to see if bouton1 is true?

<li class="bouton bouton1" onclick="changeImage(1)" ><h3>Encodage</h3></li>

function changeImage(n) {    var image = document.getElementById('brain');    if (n == 1){      alert('bouton 1');      image.src='img/brain1.gif';    }else if (n == 2){      alert('bouton 2');      image.src='img/brain2.gif';    }else if (n == 3){    }else if (n == 4){    }}

---edit 9:38am cdt

[Nic727]

I don't really know. I want that if I click on button1, it make brain1 appear. Button2 brain2, etc.

 

Almost got it. I put a different function on each buttons (don't know if it's the good way).

 function changeImage1() {	document.getElementById('brain').style.display="none";	document.getElementById('enco').style.display = "block";    }	function changeImage2() {	document.getElementById('brain').style.display="none";	document.getElementById('recup').style.display = "block";    }	function changeImage3() {	document.getElementById('brain').style.display="none";	document.getElementById('stock').style.display = "block";    }	function changeImage4() {	document.getElementById('brain').style.display="none";	document.getElementById('conso').style.display = "block";    }

The only thing is that if I click on another button after, it will not hide the image from button 1, etc.

Edited October 22, 2015 by Nic727

[davej]

See my revised code above.

[Nic727]

Thank you very much.

 

It's working!

 

Hard to do javascript from nothing... Thing's I found on Google are a bit too messy compared to your little code.

 

Is it possible to make that if I reclick a button, it display the default image brain.gif?

Edited October 22, 2015 by Nic727

[Nic727]

I am now able to restore to default with a new if.

var clique=0;       function changeImage(n) {    var image = document.getElementById('brain');        if (clique==n){    image.src='img/brain.gif';    resultat="";    document.getElementById("text").style.padding= '0';	document.getElementById("text").style.margin= '0';            clique=0;    }else if (n == 1){        clique=1;     // alert('bouton 1');      image.src='img/brain1.gif';	  resultat='Toute nouvelle informaton arrive au cerveau via les organes sensoriels. Elle est alors traitée, codée et transformée. Le cortex frontal gauche et les hippocampes interviennent. Ceux-ci sont fonction de notre degré de vigilance, de motivation et de notre état émotif. Plus le codage est structuré, plus il est facile de le reconstitué lors de la récupération.';    }else if (n == 2){        clique=2;     // alert('bouton 2');      image.src='img/brain2.gif';	  resultat='Au moment où l'on se rappelle d'événements, les différents éléments constitutifs du souvenir sont ré-assemblés. Le cortex frontal droit est nécessaire pour la remémoration.';    }else if (n == 3){        clique=3;	 // alert('bouton 3');      image.src='img/brain3.gif';	  resultat='Une fois l'encodage terminée, l'information est stockée définitivement dans le néocortex.';    }else if (n == 4){        clique=4;	 // alert('bouton 4');      image.src='img/brain4.gif';	  resultat='Pour ne pas oublié des informations, le processus de consolidation est mis en place, mais est très lent. Le processus pouvant prendre plus de 10 ans. L'hippocampe joue un rôle central.';    }        		document.getElementById("text").innerHTML = resultat;	document.getElementById("text").style.padding= '2px 70px';	document.getElementById("text").style.margin= '2px 0px';}

But I'm unable to remove the style of the padding and margin, even if I put '0' in my new if (at the beginning).

 

That's a bit annoying.

[Nic727]

So how to remove the style?

[davej]

You don't have an id = text

[dsonesuk]

Yep! That would help. :-)

[Nic727]

Yes I have, I added :

<div class="text"><p id="text"> </p></div>

[Nic727]

working now, just changed a couple codes.

Edited October 29, 2015 by Nic727