how to change an image using radio buttons - html and javascript

I am trying to figure out how to use radio buttons to change an image to different images. I would like to use javascript and html/css to achieve this, but I'm not that polished with my javascript. I know there are other answers to his here, but they seem to mostly involve backgrounds/divs and jquery, but I don't really understand jquery that well. Thanks for any help you can provide! Here's my code:

HTML:

<form action="" id="animals">
<input type="radio" id="bunnybutton" name="animal" value="bunny" onClick="changeSrc()">bunny<br>
<input type="radio" id="kittybutton" name="animal" value="kitty" onClick="changeSrc()">kitty
    </form>
<img src="http://ift.tt/1G4CC8X" id="picture" width=600px>

JAVASCRIPT:

function changeSrc() {
    if (document.getElementById("bunnybutton").checked) {
    document.getElementById("picture").src = "http://ift.tt/1G4CC8X";
    } else if (document.getElementById("kittybutton").checked) { 
    document.getElementById("picture").src = "http://ift.tt/1HjIz3u";
    }
}