jquery selector contructor cleanup?
===

Just starting out with jquery, so I've ended up with some ugly code here to to dynamically change the background on various regions of a world map. So I'm constructing the same selector twice for the mouseover and mouseout*that's what the hover does, yes, combine the two?). Is there a cleaner way to do this? ie only build it once and be able to use for both?

    $('.regionName').hover(  
      function() {
        var id = $(this).attr("id");
        id = (id.substring(0, 2));
        var region = "#" + id + "BG";
        $(region).css('background', 'url(images/world-map-' + id + '.png) no-repeat');
      },
      function() {
        var id = $(this).attr("id");
        id = (id.substring(0, 2));
        var region = "#" + id + "BG";
        $(region).css('background', 'none');
      }
    );


