Question

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.

<td>
    <a href="#0"><img src="images/disintegrator.jpg" id="img1"  height="139" border="0" /></a>
</td>

<div class="caption" id="cap1">Disintegrator</div>

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

$("#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')
    })
});

Answer 1

You can do this:

<td>
    <a href="#0"><img src="images/disintegrator.jpg" id="img1" rel="cap1" height="139" border="0" /></a>
</td>

<div class="caption" id="cap1">Disintegrator</div>


$("img").live("mouseover", function(){
     var $e = $(this);
     timer = window.setTimeout(function() {
       $('#' + $e.attr('rel')).show('fast')
     }, 500);
});

$("img").live("mouseout", function(){
     var $e = $(this);
     if (timer) {
          window.clearTimeout(timer);
     }
     $('#' + $e.attr('rel')).hide('fast')
});