<!DOCTYPE html>
<html>

<head>
    <title> Testing stuff </title>
</head>

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

    <input id = "pickBackgroundColor" value = "#ff0000" type="color" </input>
    <input id = "changeBackgroundColor" type = "button" onclick = changeBackground() value = "Click me to change the background color!" </input>
</body>

<style>

    body {
        background-image: url("http://cdn.wonderfulengineering.com/wp-content/uploads/2014/01/HD-backgrounds-3.jpg");
    }

    input, img {
        display: block;
        margin-right: auto;
        margin-left: auto;
    }

    #pickBackgroundColor, #changeBackgroundColor {
        position: relative;
        top: 150px;
        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)
    }

    function changeBackground() {
        document.body.style.background = document.getElementById("pickBackgroundColor").value
    }

</script>

</html>