function l_image2(a) {
var vall = document.getElementById("display_avatar").value;
if (document.getElementById('radio-1').checked) {
if (document.getElementById('radio-3').checked) {
document.example_img2.src = a + vall + '.png';
document.getElementsByClassName('ramka2').style.display = 'none';
document.getElementsByClassName('ramka3').style.display = 'none';
document.getElementsByClassName('ramka4').style.display = 'none';
document.getElementsByClassName('ramka5').style.display = 'none';
document.getElementsByClassName('ramka1').style.display = 'block';
}
if (document.getElementById('radio-4').checked) {
document.example_img2.src = a + vall + 'post2' + '.png';
document.getElementsByClassName('ramka2img').style.display = '-webkit-inline-box';
document.getElementsByClassName('ramka2img')[0].style.marginLeft = '0%';
document.getElementsByClassName('ramka3').style.display = 'none';
document.getElementsByClassName('ramka2').style.display = 'block';
document.getElementsByClassName('ramka4').style.display = 'none';
document.getElementsByClassName('ramka5').style.display = 'none';
document.getElementsByClassName('ramka1').style.display = 'none';
}
if (document.getElementById('radio-5').checked) {
document.example_img2.src = a + vall + 'post3' + '.png';
document.getElementsByClassName('ramka3img').style.display = '-webkit-inline-box';
document.getElementsByClassName('ramka3img')[0].style.marginLeft = '0%';
document.getElementsByClassName('ramka2').style.display = 'none';
document.getElementsByClassName('ramka4').style.display = 'none';
document.getElementsByClassName('ramka5').style.display = 'none';
document.getElementsByClassName('ramka1').style.display = 'none';
document.getElementsByClassName('ramka3').style.display = 'block';
}
if (document.getElementById('radio-6').checked) {
document.example_img2.src = a + vall + 'post4' + '.png';
document.getElementsByClassName('ramka4img').style.display = '-webkit-inline-box';
document.getElementsByClassName('ramka4img')[0].style.marginLeft = '0%';
document.getElementsByClassName('ramka2').style.display = 'none';
document.getElementsByClassName('ramka3').style.display = 'none';
document.getElementsByClassName('ramka5').style.display = 'none';
document.getElementsByClassName('ramka1').style.display = 'none';
document.getElementsByClassName('ramka4').style.display = 'block';
}
if (document.getElementById('radio-7').checked) {
document.example_img2.src = a + vall + 'post5' + '.png';
document.getElementsByClassName('ramka5img').style.display = '-webkit-inline-box';
document.getElementsByClassName('ramka5img')[0].style.marginLeft = '0%';
document.getElementsByClassName('ramka2').style.display = 'none';
document.getElementsByClassName('ramka3').style.display = 'none';
document.getElementsByClassName('ramka4').style.display = 'none';
document.getElementsByClassName('ramka1').style.display = 'none';
document.getElementsByClassName('ramka5').style.display = 'block';
}
} else if (document.getElementById('radio-2').checked) {
if (document.getElementById('radio-3').checked) {
document.example_img2.src = a + vall + '.png';
document.getElementsByClassName('ramka2').style.display = 'none';
document.getElementsByClassName('ramka3').style.display = 'none';
document.getElementsByClassName('ramka4').style.display = 'none';
document.getElementsByClassName('ramka5').style.display = 'none';
document.getElementsByClassName('ramka1').style.display = 'block';
}
if (document.getElementById('radio-4').checked) {
document.example_img2.src = a + vall + 'post22' + '.png';
document.getElementsByClassName('ramka2img').style.display = '-webkit-box';
document.getElementsByClassName('ramka2img')[0].style.marginLeft = '34%';
document.getElementsByClassName('ramka3').style.display = 'none';
document.getElementsByClassName('ramka4').style.display = 'none';
document.getElementsByClassName('ramka5').style.display = 'none';
document.getElementsByClassName('ramka1').style.display = 'none';
document.getElementsByClassName('ramka2').style.display = 'block';
}
if (document.getElementById('radio-5').checked) {
document.example_img2.src = a + vall + 'post33' + '.png';
document.getElementsByClassName('ramka3img').style.display = '-webkit-box';
document.getElementsByClassName('ramka3img')[0].style.marginLeft = '39%';
document.getElementsByClassName('ramka2').style.display = 'none';
document.getElementsByClassName('ramka4').style.display = 'none';
document.getElementsByClassName('ramka5').style.display = 'none';
document.getElementsByClassName('ramka1').style.display = 'none';
document.getElementsByClassName('ramka3').style.display = 'block';
}
if (document.getElementById('radio-6').checked) {
document.example_img2.src = a + vall + 'post44' + '.png';
document.getElementsByClassName('ramka4img').style.display = '-webkit-box';
document.getElementsByClassName('ramka4img')[0].style.marginLeft = '43%';
document.getElementsByClassName('ramka2').style.display = 'none';
document.getElementsByClassName('ramka3').style.display = 'none';
document.getElementsByClassName('ramka5').style.display = 'none';
document.getElementsByClassName('ramka1').style.display = 'none';
document.getElementsByClassName('ramka4').style.display = 'block';
}
if (document.getElementById('radio-7').checked) {
document.example_img2.src = a + vall + 'post55' + '.png';
document.getElementsByClassName('ramka5img').style.display = '-webkit-box';
document.getElementsByClassName('ramka5img')[0].style.marginLeft = '45%';
document.getElementsByClassName('ramka2').style.display = 'none';
document.getElementsByClassName('ramka3').style.display = 'none';
document.getElementsByClassName('ramka4').style.display = 'none';
document.getElementsByClassName('ramka1').style.display = 'none';
document.getElementsByClassName('ramka5').style.display = 'block';
}
}
}
function l_image(a) {
document.example_img.src = a + '.png';
}
<div class="konstrukt1">
<div class="variants0">
<img src="images/m1.png" name="example_img" id="example_img" alt="">
<img class="ramka" src="images/r1.png" name="example_img2" alt="">
<div class="ramka2" id="ramka2" style="display: none"><img src="images/r1.png" name="example_img3" alt=""><img class="ramka2img" src="images/r1.png" name="example_img4" alt=""></div>
<div class="ramka3" id="ramka3" style="display: none"><img src="images/r1.png" name="example_img5" alt=""><img class="ramka3img" src="images/r1.png" name="example_img6" alt=""><img class="ramka3img" src="images/r1.png" name="example_img7" alt=""></div>
<div class="ramka4" id="ramka4" style="display: none"><img src="images/r1.png" name="example_img8" alt=""><img class="ramka4img" src="images/r1.png" name="example_img9" alt=""><img class="ramka4img" src="images/r1.png" name="example_img10" alt=""><img class="ramka4img" src="images/r1.png" name="example_img11"
alt=""></div>
<div class="ramka5" id="ramka5" style="display: none"><img src="images/r1.png" name="example_img12" alt=""><img class="ramka5img" src="images/r1.png" name="example_img13" alt=""><img class="ramka5img" src="images/r1.png" name="example_img14" alt=""><img class="ramka5img" src="images/r1.png" name="example_img15"
alt=""><img class="ramka5img" src="images/r1.png" name="example_img16" alt=""></div>
</div>
<div class="variants1">
<div class="variants13333">
<div class="config-settings__title">
Выберите бренд
</div>
<select class="select-css" name="display_avatar" id="display_avatar">
<option value="leg" imagePath="images/logo/leg.jpg">Legrand</option>
<option value="bit" imagePath="images/logo/bti.jpg">Bticino</option>
<option value="jung" imagePath="images/logo/jung.jpg">Jung</option>
<option value="abb" imagePath="images/logo/abb.jpg">ABB</option>
</select>
<div id="imanger"><img name="preview" src="images/logo/leg.jpg"></div>
</div>
<div class="variants13333">
<div class="config-settings__block config-settings__block_posts2">
<div class="config-settings__title">
Ориентация рамки
</div>
<div class="form_radiosa">
<div class="form_radio">
<input id="radio-1" type="radio" name="radio" value="1" checked>
<label for="radio-1"></label>
</div>
<div class="form_radio2">
<input id="radio-2" type="radio" name="radio" value="2">
<label for="radio-2"></label>
</div>
</div>
</div>
<div class="config-settings__block config-settings__block_posts">
<div class="config-settings__title">
Количество постов
</div>
<div class="form_radio4">
<div class="form_radio_btn">
<input id="radio-3" type="radio" name="radio22" value="3" checked>
<label for="radio-3">1</label>
</div>
<div class="form_radio_btn">
<input id="radio-4" type="radio" name="radio22" value="4">
<label for="radio-4">2</label>
</div>
<div class="form_radio_btn">
<input id="radio-5" type="radio" name="radio22" value="5">
<label for="radio-5">3</label>
</div>
<div class="form_radio_btn">
<input id="radio-6" type="radio" name="radio22" value="6">
<label for="radio-6">4</label>
</div>
<div class="form_radio_btn">
<input id="radio-7" type="radio" name="radio22" value="7">
<label for="radio-7">5</label>
</div>
</div>
</div>
</div>
<div class="variants2">
<div class="variants244">
<h3>1. Выберите цвет рамки:</h3>
</div>
<div class="variants21">
<div class="mCustomScrollbar" data-mcs-theme="dark">
<div class="varic1">
<a class="notact" href="javascript:l_image2('images/r1')"><img src="images/r1.png"></a>Белый</div>
<div class="varic1">
<a class="notact" href="javascript:l_image2('images/r2')"><img src="images/r2.png"></a>Алюминий</div>
<div class="varic1">
<a class="notact" href="javascript:l_image2('images/r3')"><img src="images/r3.png"></a>Слоновая кость</div>
<div class="varic1">
<a class="notact" href="javascript:l_image2('images/r4')"><img src="images/r4.png"></a>Антрацит</div>
<div class="varic1">
<a class="notact" href="javascript:l_image2('images/r1')"><img src="images/r1.png"></a>Белый2</div>
<div class="varic1">
<a class="notact" href="javascript:l_image2('images/r2')"><img src="images/r2.png"></a>Алюминий2</div>
<div class="varic1">
<a class="notact" href="javascript:l_image2('images/r3')"><img src="images/r3.png"></a>Слоновая кость2</div>
<div class="varic1">
<a class="notact" href="javascript:l_image2('images/r4')"><img src="images/r4.png"></a>Антрацит2</div>
</div>
</div>
</div>
<div class="variants3">
<div class="variants244">
<h3>2. Выберите цвет механизма:</h3>
</div>
<div class="mCustomScrollbar" data-mcs-theme="dark">
<div class="variants21">
<div class="varic1">
<a class="notact2" href="javascript:l_image('images/m1')"><img src="images/m1.png"></a>Белый</div>
<div class="varic1">
<a class="notact2" href="javascript:l_image('images/m2')"><img src="images/m2.png"></a>Алюминий</div>
<div class="varic1">
<a class="notact2" href="javascript:l_image('images/m3')"><img src="images/m3.png"></a>Слоновая кость</div>
<div class="varic1">
<a class="notact2" href="javascript:l_image('images/m4')"><img src="images/m4.png"></a>Антрацит</div>
</div>
</div>
</div>
</div>
</div>