Üstüne tıklanınca değişen resim
Fotoğrafa tıklayınca 2. görselim aktif oluyor


bunun için sürekli iki resim ayarlamam gerekiyordu
seçildi alanını sabit yapıp ilk resim de sadece seçiniz alanını değiştirtmek istiyorum bunu nası yapabilirim
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<div class="product col-sm-6 col-xs-6">
<input type="radio" name="Siparis" value="1025" id="2" checked="checked" />
<img src="https://i.hizliresim.com/fzf5lyf.jpg" alt="Image" class="product-image" />
<img src="https://i.hizliresim.com/bkrlaek.jpg" alt="Image" class="product-image selected" />
<input type="radio" name="product_id[]" value="1025">
<input type="radio" name="custom_options_default[1]" id="not2" class="color" value="CİNSİYET ve BEDEN bilgisi istemeyi UNUTMAYIN..!" />
</div>
.product-image.selected {
display: none;
}
.product.selected .product-image {
display: none;
}
.product.selected .product-image.selected {
display: block;
}
.product [type=radio] {
position: absolute;
opacity: 0;
}
$('[name="custom_options_default[1]"]:eq()').attr("checked", true);
$(".product").click(function () {
if (!$(".custom-option", $(this)).length) {
$(this).addClass("selected");
}
var $siblings = $(this).siblings(".product");
$siblings.removeClass("selected");
$siblings.find(".custom-option").val("");
$(this).parents(".checkout-form").find("[name='product_id[]']").attr("checked", false);
$(this).parents(".checkout-form").find("[name='urun']").attr("checked", false);
$(this).find("[name='product_id[]']").attr("checked", true);
$(this).find("[name='urun']").attr("checked", true);
console.log("submit");
$(".smart-checkout-form222").submit();
kabaca şöyle bişey yaptım üzerinde düzenleme yaparsın.
<div class="product col-sm-6 col-xs-6">
<input type="radio" name="Siparis" value="1025" id="2" checked="checked" />
<img src="https://i.hizliresim.com/fzf5lyf.jpg" alt="Image" class="product-image" />
<div class="wrapper">
<div class="wrapper-txt">Seçiniz</div>
</div>
<input type="radio" name="product_id[]" value="1025">
<input type="radio" name="custom_options_default[1]" id="not2" class="color" value="CİNSİYET ve BEDEN bilgisi istemeyi UNUTMAYIN..!" />
</div>
*{
margin: 0px;
padding: 0px;
}
.product {
display:flex;
position: relative;
width: 401px;
height: 726px;
}
.product img ,.product .wrapper{
margin: 0px auto;
padding: 0px;
}
.product.selected .wrapper {
content: '';
border: 3px solid #c0bd18;
}
.product.selected .wrapper-txt{
background: #c0bd18;
}
.wrapper {
width: calc(100% - 40px);
height: calc(100% - 64px);
position: absolute;
top: calc(50% - 8px);
left: 50%;
display:flex;
flex-direction:column;
border: 3px solid black;
transform: translate(-50%, -50%);
}
.wrapper .wrapper-txt{
font-size: 3em;
background: black;
min-width: calc(100% - 40px);
height: 67px;
color: white;
left: 50%;
transform: translateX(-50%);
cursor: pointer;
position: absolute;
bottom: -25px;
text-align: center;
z-index: 2;
}
.product [type=radio] {
position: absolute;
opacity: 0;
}
$('[name="custom_options_default[1]"]:eq()').attr("checked", true);
$(".product").click(function() {
if (!$(".custom-option", $(this)).length) {
$(this).addClass("selected");
$(this).find(".wrapper-txt").text("Seçildi ✓");
}
var $siblings = $(this).siblings(".product");
$siblings.find(".custom-option").val("");
$(this).parents(".checkout-form").find("[name='product_id[]']").attr("checked", false);
$(this).parents(".checkout-form").find("[name='urun']").attr("checked", false);
$(this).find("[name='product_id[]']").attr("checked", true);
$(this).find("[name='urun']").attr("checked", true);
console.log("submit");
$(".smart-checkout-form222").submit();
});