<fieldset>
<legend>Выберите изображение чашки</legend>
<form name="imageControl">
<input type="radio" name="imgChange" id="im1" value="http://html-plus.in.ua/wp-content/uploads/examples/js-examples/cups/cup1.jpg" checked>
<label for="im1">Чашка 1</label>
<input type="radio" name="imgChange" id="im2" value="http://html-plus.in.ua/wp-content/uploads/examples/js-examples/cups/cup2.jpg">
<label for="im2">Чашка 2</label>
<input type="radio" name="imgChange" id="im3" value="http://html-plus.in.ua/wp-content/uploads/examples/js-examples/cups/cup3.jpg">
<label for="im3">Чашка 3</label>
<input type="radio" name="imgChange" id="im4" value="http://html-plus.in.ua/wp-content/uploads/examples/js-examples/cups/cup4.png">
<label for="im4">Чашка 4</label>
</form>
</fieldset>
<img src="http://html-plus.in.ua/wp-content/uploads/examples/js-examples/cups/cup1.jpg" alt="Cup with cat" id="cupHolder">
var cupHolder = document.getElementById("cupHolder"),
radioLen = document.imageControl.imgChange.length;
for (var i = 0; i < radioLen; i++) {
document.imageControl.imgChange[i].addEventListener('click',
function() {
cupHolder.src = this.value;
}
);
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.