<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;
            }
        );
    }

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.