On click sur la couleur pour changer la photo et

mayaaata Messages postés 11 Date d'inscription   Statut Membre Dernière intervention   -  
jordane45 Messages postés 38486 Date d'inscription   Statut Modérateur Dernière intervention   -
Bonjour tt le monde c'est la premiere fois que je pose une question j'espère que j'aquise une réponse bien précise , bref j ai cree une page qui permet aux clients de voir les couleurs des produit a travers d'un click sur la couleur tel maintenant j'aimerazi savoir met une référence qui s'affiche lorsque le client click sur la couleur l'image et la référence s'affiche ? merci de repondre.
A voir également:

1 réponse

Réponse 1 / 1
yg_be Messages postés 23541 Date d'inscription   Statut Contributeur Dernière intervention   Ambassadeur 1 584
 
bonjour, peux-tu partager le code de ta page?
0
mayaaata Messages postés 11 Date d'inscription   Statut Membre Dernière intervention  
 
Avec plaisir
0
mayaaata Messages postés 11 Date d'inscription   Statut Membre Dernière intervention  
 
quand je fait un copier coller de code de ma page une messge s'affiche votre corps du message vide
0
mayaaata Messages postés 11 Date d'inscription   Statut Membre Dernière intervention  
  
<div class="col-lg-5">
    <div class="product_details">
     <div class="product_details_title">
      <h2>LIPSTICK NUDE</h2>
     
     </div>
     <div class="free_delivery d-flex flex-row align-items-center justify-content-center">
      <span class="ti-truck"></span><span>LIVRAISON GRATUITE</span>
       <img src="C:\Users\INFOTEC\Desktop\BBC WSite - Copie\images\transport3.gif">
     </div>
     <br>
     <div class="product_price">Prix : 10 d</div><br>
     <center>
     <div class="product_color">
      <span>Choisissez la couleur :</span><br><br>
      <ul>
       <li onclick="javascript: changeColor(this, 'li1');" style="background: #FA8072"></li>
       <li onclick="javascript: changeColor(this, 'li2');" style="background: #F08080"></li>
       <li onclick="javascript: changeColor(this, 'li3');" style="background: #F08080"></li><br>
       <li onclick="javascript: changeColor(this, 'li4');" style="background: #F08080"></li>
       <li onclick="javascript: changeColor(this, 'li5');" style="background: #F08080"></li>
       <li onclick="javascript: changeColor(this, 'li6');" style="background: #F08080"></li>
       
       
      </ul>
      <br>
      <div class="quantity d-flex flex-column flex-sm-row align-items-sm-center">
      <center><span>Ref:</span></center>
      <div class="quantity_selector">
     
      
      </div>
          
       
         </div>
     </div>
     </center>
     <div class="quantity d-flex flex-column flex-sm-row align-items-sm-center">
      <span>Quantity:</span>
      <div class="quantity_selector">
       <span class="minus"><i class="fa fa-minus" aria-hidden="true"></i></span>
       <span id="quantity_value">1</span>
       <span class="plus"><i class="fa fa-plus" aria-hidden="true"></i></span>
0
mayaaata Messages postés 11 Date d'inscription   Statut Membre Dernière intervention  
  
</div>
          
       
     </div>
      
     
        </div>
     </div>
    </div>
   </div>
0
mayaaata Messages postés 11 Date d'inscription   Statut Membre Dernière intervention  
  
<tr> 
                        <th colspan="8">Choisissez la couleur de LIPSTICK</th> 
                    </tr> 
                    <tr> 
                        <td>
                            <div onclick="javascript: changeColor(this, 'li1');" style="background-color: #FA8072;"></div></td> <td>
                            <div onclick="javascript: changeColor(this, 'li2');" style="background-color: #F08080;"></div></td> <td>
                            <div onclick="javascript: changeColor(this, 'li3');" style="background-color: #BC8F8F;"></div></td> <td>
                            <div onclick="javascript: changeColor(this, 'li4');" style="background-color: #DDA0DD;"></div></td> </tr> <tr> <td>
                            <div onclick="javascript: changeColor(this, 'li5');" style="background-color: #8B4513;"></div></td> <td>
                            <div onclick="javascript: changeColor(this, 'li6');" style="background-color: #DC143C;"></div></td> <td>
                            <div onclick="javascript: changeColor(this, 'li7');" style="background-color: #FF0000;"></div></td> <td>
                            <div onclick="javascript: changeColor(this, 'li8');" style="background-color: #B22222;"></div></td> </tr> <tr> <td>
                            <div onclick="javascript: changeColor(this, 'li9');" style="background-color: #8B0000;"></div></td> <td>
                            <div onclick="javascript: changeColor(this, 'li10');" style="background-color: #FF69B4;"></div></td> <td>
                            <div onclick="javascript: changeColor(this, 'li11');" style="background-color: #FF6347;"></div></td> <td>
                            <div onclick="javascript: changeColor(this, 'li12');" style="background-color: #FF4500;"></div></td> </tr> <tr> <td>
                            
                            
                            </div>
                        </td> 
                    </tr>            
                            </div>
                        </td> 
                    </tr> 
                </table>
                <script> 
<code js>
                    /** au départ toutes les images sont cachées */
                    tab = document.getElementsByClassName('li-image');
                    for(i=1; i<tab.length; i++){
                        tab[i].style = "display:none";
                    }
                    function changeColor(elm, id)
                    {
                        window.status=elm.style.Color; 
                        document.body.style.Color=elm.style.Color; 
                        /* cacher les autres image */
                        tab = document.getElementsByClassName('li-image');
                        for(i=0; i<tab.length; i++){
                            tab[i].style = "display:none";
                        }
                        /* Montrer l'iamge sélectionner */
                        document.getElementById(id).style = "display:block";
                    }

</script> 
                <style> table, tr, td div{ width: 50px; height: 50px; } </style> 
    
            </div>
0

Discussions similaires

couleur personnage
Gasper -
Izzi -

9 réponses
Bitmoji
Manon -
Radinoz -

1 réponse
sertissage des cables rj45
lekludo -
brupala -

7 réponses