<!DOCTYPE html>
<html>

<head>
    <title> Yo, I'm a sick nasty programmer </title>
</head>

<body>
    <img id="displayDuckImage" height = "100" width = "100" src="http://www.toyhalloffame.org/sites/www.toyhalloffame.org/files/toys/square/rubber-duck_0.jpg" />
    <button id="changeDuckImage" onclick=changeDuck() >Click me to change the duck!</button>
</body>

<style>

    body {
        background-color : #d0e4fe;
    }

    #displayDuckImage, #changeDuckImage {
        display: block;
        margin-right : auto;
        margin-left : auto;
    }

</style>

<script>

    var images = {
        duckOne : "http://www.toyhalloffame.org/sites/www.toyhalloffame.org/files/toys/square/rubber-duck_0.jpg",
        duckTwo : "http://www.saintpetersblog.com/wp-content/uploads/2014/08/rubber-duck.jpg"

    }

    function changeDuck() {
        var display = document.getElementById("displayDuckImage")
        display.src = (display.src == images.duckOne && images.duckTwo || images.duckOne)
    }

</script>

</html>