Jquery shorter code
<p>I am new to jquery and still learning. The code I have right now works and it does what I want except it's too long and inefficient I was wondering if there is a way to make it shorter and more dynamic(planing to add more images in the future). There are 12 images each with unique id. I also use 12 divs that hold caption for each image. </p>

<pre><code>&lt;td&gt;
    &lt;a href="#0"&gt;&lt;img src="images/disintegrator.jpg" id="img1"  height="139" border="0" /&gt;&lt;/a&gt;
&lt;/td&gt;

&lt;div class="caption" id="cap1"&gt;Disintegrator&lt;/div&gt;
</code></pre>

<p>Is there a way to make the code below shorter? There are 10 more block like that for the other images.  </p>

<pre><code>$("#img1").live("mouseover", function () {
    //timeout function
    timer = window.setTimeout(function () {
        $("#cap1").show('fast')
    }, 500);

    $('#img1').mouseout(function () {
        if (timer) {
            window.clearTimeout(timer);
        }
        $("#cap1").hide('fast')
    })
});
$("#img2").live("mouseover", function () {
    timer = window.setTimeout(function () {
        $("#cap2").show('fast')
    }, 500);
    $('#img2').mouseout(function () {
        if (timer) {
            window.clearTimeout(timer);
        }
        $("#cap2").hide('fast')
    })
});
</code></pre>
