How can i write jQuery for below problem?
<p>I need help I am new to jQuery and i want to implement jQuery in one of my webpage. 
I also have one form having four text boxes. I have two div tags one in another i.e. my code structure is in following way</p>

<pre><code>&lt;div&gt;
    &lt;div&gt;
        &lt;img&gt;
        &lt;img&gt;
        &lt;img&gt;
        &lt;img&gt;
    &lt;/div&gt;
&lt;div&gt;
</code></pre>

<p>I just want to do with the help of jquery that</p>

<ol>
<li>On document ready the first img should be visible out of the four <code>&lt;img&gt;</code> and rest of the three <code>&lt;img&gt;</code> should be hidden between the inner div tag and the cursor focused on first textbox. </li>
<li>Now when focus gose to second textbox the current visible <code>&lt;img&gt;</code> should get hidden and only second <code>&lt;img&gt;</code> should be visible.</li>
<li>When focus gose to third textbox the current visible <code>&lt;img&gt;</code> should get hidden and only third  should be visible.</li>
<li>In this way the fourth <code>&lt;img&gt;</code> should be visible when control goes to fourth text box.</li>
</ol>

<p>Overall when focus goes to any of the textbox the <code>&lt;img&gt;</code> related to it should be visible and the remaining three <code>&lt;img&gt;</code> should be hidden.</p>

<p>So please help in doing above jQuery code which do the following functionality with out affecting other images on the same page except the imaged mentioned above.</p>

<p>Waiting for your reply, guys!</p>
