Load image from file in Javascript
<p>So I have my Javascript code that I've included in my HTML file:</p>

<pre><code>&lt;script&gt;
var checkbox = document.getElementById('checkbox');
var checkbox_1 = document.getElementById('checkbox_1');
var checkbox_2 = document.getElementById('checkbox_2');

var img_1 = "green.png";
var img_2 = "red.png";
var img_3 = "yellow.png";

checkbox.onclick = function () {
    if (checkbox.src == img_1) {
        checkbox.src = img_2;
    } else if (checkbox.src == img_2) {
        checkbox.src = img_3;
    } else if (checkbox.src == img_3) {
        checkbox.src = img_1;
    }
}
checkbox_1.onclick = function () {
    if (checkbox_1.src == img_1) {
        checkbox_1.src = img_2;
    } else if (checkbox_1.src == img_2) {
        checkbox_1.src = img_3;
    } else if (checkbox_1.src == img_3) {
        checkbox_1.src = img_1;
    }
}
checkbox_2.onclick = function () {
    if (checkbox_2.src == img_1) {
        checkbox_2.src = img_2;
    } else if (checkbox_2.src == img_2) {
        checkbox_2.src = img_3;
    } else if (checkbox_2.src == img_3) {
        checkbox_2.src = img_1;
    }
}
&lt;/script&gt;
</code></pre>

<p>What I want to do, is load the images from file, not from URL. From URL, it works fine, but from file it doesn't. Why is that, and how can I fix it?</p>