Lier les paramètres d'une image à plusieurs boutons

Bon. J'aurais besoin d'aide s'il vous plaît. Comme sur la photo il y a 2 boutons et une image. La grande image apparait quand on clique sur le premier bouton mais j'aimerais que quand on clique sur le deuxieme bouton ça change l'image du dessus. Pouvez vous m'aidé ? Voici le code :

<script type="text/javascript"> 
            function viewImage(id) { 
                document.getElementById(id).innerHTML="<img src='https://hh.hh-content.com/pictures/girls/1/ava0.png'>";
            } 
    </script>
  
 <div id="image"></div>
   
  <button id="bouton" onclick="javascript:viewImage('image');"><img src="https://hh.hh-content.com/pictures/girls/1/ico0.png"></button>
  <button id="bouton" onclick="javascript:viewImage('image');"><img src="https://hh.hh-content.com/pictures/girls/3/ico0.png"></button>

Je m'explique voici le lien du bouton 1 : https://hh.hh-content.com/pictures/girls/1/ico0.png

Voici le lien du bouton 2 : https://hh.hh-content.com/pictures/girls/3/ico0.png

Mais la grande image n'est lié que au premier bouton...

J'aurais vraiment besoin d'aide s'il vous plaît...

Modifié par frederick1718 (17 Feb 2019 - 18:24)

Bon. J'aurais besoin d'aide s'il vous plaît. Comme sur la photo il y a 2 boutons et une image. La grande image apparait quand on clique sur le premier bouton mais j'aimerais que quand on clique sur le deuxieme bouton ça change l'image du dessus. Pouvez vous m'aidé ? Voici le code :

<script type="text/javascript">
            function viewImage(id) { 
                document.getElementById(id).innerHTML=<img src='https://hh.hh-content.com/pictures/girls/1/ava0.png'>;
            } 
    </script>
  
 <div id="image"&gt;&lt;/div>
   
  <button id="bouton" onclick="javascript:viewImage('image')"><img src="https://hh.hh-content.com/pictures/girls/1/ico0.png"></button>
  <button id="bouton" onclick="javascript:viewImage('image')"><img src="https://hh.hh-content.com/pictures/girls/3/ico0.png"></button>

Je m'explique voici le lien du bouton 1 : https://hh.hh-content.com/pictures/girls/1/ico0.png

Voici le lien du bouton 2 : https://hh.hh-content.com/pictures/girls/3/ico0.png

Mais la grande image n'est lié que au premier bouton...

J'aurais vraiment besoin d'aide s'il vous plaît...

Image :upload/1550424105-74515-screenshot-haremdex-creation..png
Modifié par frederick1718 (17 Feb 2019 - 18:29)

Salut

Si l'adresse de ton image est la même (sauf le nom de l'image) alors c'est tout bénéf; tu peux rajouter un param dans ta function javascript

https://hh.hh-content.com/pictures/girls/1/ava0.png = 1er grande image
https://hh.hh-content.com/pictures/girls/1/ava1.png = 2eme grande image

Du coup, on a "https://hh.hh-content.com/pictures/girls/1/" ça en commun. ET SEUL le nom de l'image change.

Du coup en reprenant ton code on pourrait faire comme cela

 <script type="text/javascript">
            function viewImage(id, nameImg) { 
                document.getElementById(id).innerHTML=<img src='https://hh.hh-content.com/pictures/girls/1/'+nameImg+'.png'>;
            } 
    </script>
  
 <div id="image"&gt;&lt;/div>
   
  <button id="bouton" onclick="javascript:viewImage('image', 'ava0')"><img src="https://hh.hh-content.com/pictures/girls/1/ico0.png"></button>
  <button id="bouton" onclick="javascript:viewImage('image', 'ava1')"><img src="https://hh.hh-content.com/pictures/girls/3/ico0.png"></button>

J'ai donc rajouté nameImg dans le js et je lui envoie ava1 ou ava0 suivant le clic
Modifié par JENCAL (18 Feb 2019 - 10:14)