Change image onclick on thumb using javascript

<style> #content img { min-width: 50px; } </style> <img alt="Mickey mouse Hoodies, 1-8 Year Kids Boys " class="imgpro" src="https://ae01.alicdn.com/kf/Hb05b26ec3f5c496fbefbc9d849660b895/1-8Y-Kids-Boys-Girls-Hoodies-Pants-Suit-Cartoon-Minnie-Children-s-Clothing-Sweatshirts-Baby-Clothing.jpg" title="Mickey mouse Hoodies, 1-8 Year Kids Boys " itemprop="image" style="width:300px"/> <script> function changecolor(a){ document.getElementsByClassName("imgpro")[0].src=a.src } </script> <script id="colors"> { "color":[ {"imgsrc":"https://ae01.alicdn.com/kf/Hb05b26ec3f5c496fbefbc9d849660b895/1-8Y-Kids-Boys-Girls-Hoodies-Pants-Suit-Cartoon-Minnie-Children-s-Clothing-Sweatshirts-Baby-Clothing.jpg"}, {"imgsrc":"https://ae01.alicdn.com/kf/H0bc89085b929461aada7238b0539982aP/1-8Y-Kids-Boys-Girls-Hoodies-Pants-Suit-Cartoon-Minnie-Children-s-Clothing-Sweatshirts-Baby-Clothing.jpg"}, {"imgsrc":"https://ae01.alicdn.com/kf/H0fc9aceef70042469a4e1cfeaf4ee550j/1-8Y-Kids-Boys-Girls-Hoodies-Pants-Suit-Cartoon-Minnie-Children-s-Clothing-Sweatshirts-Baby-Clothing.jpg"}, {"imgsrc":"https://ae01.alicdn.com/kf/H4326f29eaa014c21bc6388f16b951b13u/1-8Y-Kids-Boys-Girls-Hoodies-Pants-Suit-Cartoon-Minnie-Children-s-Clothing-Sweatshirts-Baby-Clothing.jpg"}, {"imgsrc":"https://ae01.alicdn.com/kf/Ha5c744e0c55d4eaabf39c1f130be48b98/1-8Y-Kids-Boys-Girls-Hoodies-Pants-Suit-Cartoon-Minnie-Children-s-Clothing-Sweatshirts-Baby-Clothing.jpg"}, {"imgsrc":"https://ae01.alicdn.com/kf/H79fe35886db74b4e867e43cb04a4b921C/1-8Y-Kids-Boys-Girls-Hoodies-Pants-Suit-Cartoon-Minnie-Children-s-Clothing-Sweatshirts-Baby-Clothing.jpg"}, {"imgsrc":"https://ae01.alicdn.com/kf/H5d6014e2e33b44f6bc4f551ff7caefc4x/1-8Y-Kids-Boys-Girls-Hoodies-Pants-Suit-Cartoon-Minnie-Children-s-Clothing-Sweatshirts-Baby-Clothing.jpg"} ] } </script> <div id="colorstyle"> <script> var dd=document.getElementById("colors").innerHTML; var jsonData = JSON.parse(dd); for (var i = 0; i < jsonData.color.length; i++) { var counter = jsonData.color[i]; document.write('<img src="'+counter.imgsrc+'" onclick="changecolor(this)" style="width:50px; height:50px; margin: 2px; box-shadow: 0 0 1px 0 black; padding:2px; display:inline-block; cursor:pointer"/>'); } </script> </div>

© Manajmnt code

Share to :

☷✎