JQuery: Update hover on mouse movement

Question

$(document).ready(function() {
  $(".hoverimage").hover(
    function(e) { openQuicktip(this,e); },
    function() { closeQuicktip(this); }
  );

  $("area").hover(
    function(e) { openQuicktip(this,e); },
    function() { closeQuicktip(this); }
  );
});

function openQuicktip(elem,e) {
  ar x = e.pageX;
  ar y = e.pageY;

  $('.helpbox').fadeIn('fast');
  $('.helpbox').css('top', y).css('left', x);
  $('.helpbox .desc').html($(elem).attr('alt'));
}

function closeQuicktip($elem) {
  $('.helpbox').fadeOut('fast');
}

This is my jQuery, how do I make it "change" the coords each time i move the mouse?

Answer 1

Using mousemove event.

$("area").mousemove(function(e) {
    x = e.pageX;
    y = e.pageY;
    $('.helpbox').css('top', y).css('left', x);
});

Also might consider adding a global variable that holds the open/close state of the QuickTip. And only update .helpbox if QuickTip is open.

..fredrik