Hovering over <a> and displaying images based on value
<p>I am currently displaying pictures when an  tag is hover over. I have been able to workout the main problem of displaying the picture. The problem is that it has a glitch when hovering occurs quickly. Is there away to avoid that? Also how can i set a default image to display when page is loaded? <a href="http://jsfiddle.net/BramVanroy/7Wp9z/" rel="nofollow">JSFIDDLE</a></p>

<p><strong>HTML</strong></p>

<pre><code>&lt;div id="links"&gt;    
    &lt;a href="example.htm" class="large magenta awesome" data-content="cheeseburger"&gt;Cheeseburger »&lt;/a&gt;
    &lt;a href="example.htm" class="large blue awesome" data-content="tacos"&gt;Tacos »&lt;/a&gt;
    &lt;a href="example.htm" class="large red awesome" data-content="salads"&gt;Salads »&lt;/a&gt;
    &lt;a href="example.htm" class="large orange awesome" data-content="bread-sticks"&gt;Bread Sticks »&lt;/a&gt;
    &lt;a href="example.htm" class="large yellow awesome" data-content="dessert"&gt;Dessert »&lt;/a&gt;
&lt;/div&gt;
</code></pre>

<p><strong>Jquery</strong></p>

<pre><code>$("div#links &gt; a").hover(
    function(){
        var ID = $(this).data("content");
        $("div#images").children("img#" + ID).fadeIn("slow");
    },
    function() {
        var ID = $(this).data("content");
        $("div#images").children("img#" + ID).hide();
    }
);​
</code></pre>

<p>Glitch</p>

<p><img src="http://i.stack.imgur.com/nZj9p.png" alt="enter image description here"></p>
