Показать сообщение отдельно
  #3 (permalink)  
Старый 05.03.2020, 15:30
Аватар для voraa
Профессор
Отправить личное сообщение для voraa Посмотреть профиль Найти все сообщения от voraa
 
Регистрация: 03.02.2020
Сообщений: 2,704

<!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>
Ответить с цитированием