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>
© 2025 Manajmnt code
Comments
Post a Comment
message