<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8" lang="ru">
<meta name="viewport" content="width=device-width, initial-scale=1.0" >
<title>TESTE </title>
<style>
/* Прячем input за img */
label>img {
position:relative;
height: 100px;
z-index: 1;
}
label>input {
position:relative;
left: -30px;
top: -30px;
}
</style>
<script>
</script>
</head>
<body>
<div class="input_block">
<legend>Выберите вариант</legend>
<form name="imageControl">
<fieldset style="border: 2px solid #1221; border-radius: 10px; width:500px; height:250px;">
<label for="im1">
<img src="http://html-plus.in.ua/wp-content/uploads/examples/js-examples/cups/cup4.png" >
<input type="radio" class="input_img" name="imgChange" id="im1" value="http://html-plus.in.ua/wp-content/uploads/examples/js-examples/cups/cup4.png">
</label>
<label for="im2">
<img src="http://html-plus.in.ua/wp-content/uploads/examples/js-examples/cups/cup2.jpg" >
<input type="radio" class="input_img" name="imgChange" id="im2" value="http://html-plus.in.ua/wp-content/uploads/examples/js-examples/cups/cup2.jpg">
</label>
<label for="im3">
<img src="http://html-plus.in.ua/wp-content/uploads/examples/js-examples/cups/cup3.jpg" >
<input type="radio" class="input_img" name="imgChange" id="im3" value="http://html-plus.in.ua/wp-content/uploads/examples/js-examples/cups/cup3.jpg">
</label>
<br>
<label for="im4">
<img src="http://html-plus.in.ua/wp-content/uploads/examples/js-examples/cups/cup1.jpg" >
<input type="radio" class="input_img" name="imgChange" id="im4" value="http://html-plus.in.ua/wp-content/uploads/examples/js-examples/cups/cup1.jpg">
</label>
<label for="im5">
<img src="http://html-plus.in.ua/wp-content/uploads/examples/js-examples/cups/cup1.jpg" >
<input type="radio" class="input_img" name="imgChange" id="im5" value="http://html-plus.in.ua/wp-content/uploads/examples/js-examples/cups/cup1.jpg">
</label>
<label for="im6">
<img src="http://html-plus.in.ua/wp-content/uploads/examples/js-examples/cups/cup2.jpg" >
<input type="radio" class="input_img" name="imgChange" id="im6" value="http://html-plus.in.ua/wp-content/uploads/examples/js-examples/cups/cup2.jpg">
</label>
</fieldset>
</form>
</div>
<div>
<img id='imres' >
</div>
<script>
document.addEventListener('DOMContentLoaded', () => {
document.querySelectorAll('input[type=radio]').forEach (inp => {
inp.addEventListener('change', (ev) => {
let ichecked = document.querySelector('input[type=radio]:checked')
document.getElementById('imres').src = ichecked.value
})
})
})
</script>
</body>
</html>
|