On click sur la couleur pour changer la photo et
mayaaata
Messages postés
16
Date d'inscription
Statut
Membre
Dernière intervention
-
jordane45 Messages postés 30427 Date d'inscription Statut Modérateur Dernière intervention -
jordane45 Messages postés 30427 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.
1 réponse
-
yg_be Messages postés 23437 Date d'inscription Statut Contributeur Dernière intervention Ambassadeur 1 588
bonjour, peux-tu partager le code de ta page?-
-
-
<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> -
-
<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>
-
