Question

jQuery beginner here.

Here is what I’m working on. I have an area map with 10 hotspots on it. Hover over each of the hotspots and it shifts the background of the div (id=dialpad) to display other data (in a sprite).

The code I have currently works, but I have a separate function for each hotspot ID.

Ex:

    $('#dial1')
    // On mouse over, move the background on hover
   .mouseover(function() {
     $('#dialpad').css('backgroundPosition', '0 -120px');
   })
   // On mouse out, move the background back
   .mouseout(function() {
     $('#dialpad').css('backgroundPosition', '0 0');
   })
     $('#dial2')
    // On mouse over, move the background on hover
   .mouseover(function() {
     $('#dialpad').css('backgroundPosition', '0 -240px');
   })
   // On mouse out, move the background back
   .mouseout(function() {
     $('#dialpad').css('backgroundPosition', '0 0');
   });
   ...

What I want to do is to consolidate that code into a single function where I simply pass the vertical offset figure from each area ID.

Can someone assist?

Answer 1

$('#dial1,#dial2').hover(
    function() { changePosition('0 ' + (parseInt(this.id.match(/\d+$/)[0])) * -120 + 'px'); },
    function() { changePosition('0 0'); }
);

function changePosition(position) {
   $('#dialpad').css('backgroundPosition', position);
}

---

Update:

Alternatively, if the “hotspots” occur on the page in the same order as the index numbers, then you could take a slightly more efficient approach and give them all a class and use the index property of .each() to determine the proper index number.

$('.hotspots').each(function( idx ) {
    $(this).hover(
        function() { changePosition('0 ' + ((idx + 1) * -120) + 'px'); },
        function() { changePosition('0 0'); }
    );
});

function changePosition(position) {
   $('#dialpad').css('backgroundPosition', position);
}

In fact, you really don’t need the changePosition() function if you don’t want it. The code is short enough that a little repetition is not a big deal.

$('.hotspots').each(function( idx ) {
    $(this).hover(
        function() { $('#dialpad').css('backgroundPosition', '0 ' + ((idx + 1) * -120) + 'px')},
        function() { $('#dialpad').css('backgroundPosition', '0 0'); }
     );
});​