Why does this script start with a blank image?
<p>I'm using a script to scroll through images in an iframe. I can't figure out how to get the script to start on image 1 rather than start blank and then go to image 1.</p>

<p>Here is the script,</p>

<hr>

<pre><code>&lt;script type="text/javascript"&gt;

    var limit = 8;
    var i = limit - 1;

function image_onclick(direction)
{
    i = ( i + ( (direction == 'prev')?limit-1:1 ) ) % limit;

    document.getElementById('image_box').innerHTML = '&lt;img src=images/gallery/image' + (i+1) + '.jpg&gt;';
}
&lt;/script&gt;
</code></pre>

<hr>

<p>This is the script in the body,</p>

<hr>

<pre><code>&lt;div id="leaf1"&gt;&lt;button onClick="image_onclick('prev');"&gt;&lt;img src="images/leaf.gif" alt="leaf arrow" border="0"/&gt;&lt;/button&gt;&lt;/div&gt;
&lt;div id="image_box"&gt;&lt;/div&gt;
&lt;div id="leaf2"&gt;&lt;button onClick="image_onclick('next');"&gt;&lt;img src="images/leaf2.gif" alt="leaf arrow" border="0"/&gt;&lt;/button&gt;&lt;/div&gt;
</code></pre>

<hr>

<p>Any suggestions are much appreciated.</p>
