<หัว>


<ชื่อเรื่อง> ลองแว่นกันแดด
<สไตล์>
# ภาชนะบรรจุ {
position: relative;
max-width: 100%;
}

# ผู้ใช้-ภาพถ่าย {
max-width: 100%;
}

# แว่นตากันแดดที่เลือก {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
pointer-events: none;
}

ลองสวมแว่นกันแดด

<เลือก id = "แว่นตากันแดดรายการ">
แว่นกันแดด1
แว่นกันแดด2



<สคริปต์>
CONST userphoto = document.¿ ('User-photo');
CONST selectedsunglasses = document.∮ ('selected-sunglasses');
CONST uploadphotoinput = document..net ('upload-photo');
CONST sunglasselist = document.¿ ('sunglasses-list');

Uploadphotoinput. ¿('change', (event) => {
const file = event.target.files[0];
if (file) {
userPhoto.src = URL.createObjectURL(file);
}
});

Sunglasseslise.¿ ('change', (event) => {
const selectedSunglassesPath = event.target.value;
selectedSunglasses.src = selectedSunglassesPath;
} );