Using prependTo to display full size images of thumbnails
<p>I have a default image on my site using <code>prependTo</code>: </p>

<pre><code>$('&lt;li&gt;&lt;/li&gt;').prependTo('#files')
              .html('&lt;img src="/media/sample1.jpeg" alt="" /&gt;&lt;br /&gt;')
              .addClass('success');
</code></pre>

<p>Above the default image are 3 thumbnails, which are written as:</p>

<pre><code>&lt;div id="gallery"&gt;
    &lt;ul&gt; 
        &lt;li&gt;
            &lt;a href="/media/glasses1.png" title="styling yourself w/ this armani pair"&gt;
                &lt;img src="/media/glasses1.png" width="72" height="72" alt="" /&gt; 
            &lt;/a&gt;
        &lt;/li&gt; 
        &lt;li&gt;
            &lt;a href="/media/glasses0.png" title="styling yourself w/ this guess pair"&gt;
                &lt;img src="/media/glasses0.png" width="72" height="72" alt="" /&gt; 
            &lt;/a&gt;
        &lt;/li&gt; 
        &lt;li&gt;
            &lt;a href="/media/glasses2.png" title="styling yourself w/ this guess pair"&gt;
                &lt;img src="/media/glasses2.png" width="72" height="72" alt="" /&gt; 
            &lt;/a&gt;
        &lt;/li&gt;
    &lt;/ul&gt;
&lt;/div&gt;
</code></pre>

<p>How do I detect a mouseover on the thumbnail so that I can replace the default image with the full size image of the thumbnail?</p>
