jQuery map mousemove - PullRequest
Новая
       4

jQuery map mousemove

0 голосов
/ 07 апреля 2010

Я сделал карту с помощью jQuery, которая разделена во многих регионах и использует координаты карты для создания областей наведения.При наведении подсказка появляется для каждого региона.Все отлично работает, но есть одна проблема.Подсказка должна следовать за курсором мыши.Это я сделал с помощью перемещения мыши, но если моя карта находится в элементе div, центрированном по центру страницы, всплывающая подсказка находится не там, где находится курсор, а, возможно, больше слева.Проблема усугубляется с увеличением экрана.

Как я могу изменить свой код, чтобы подсказка всегда была там, где находится курсор? 

     $(function() {

     $("#map-container AREA").mouseover(function() {
         var regionMap = "." + $(this).attr("id") + "-map";
         $(regionMap).css("display", "inline");
     }).mouseout(function() {

            var regionMap = "." + $(this).attr("id") + "-map";
         // Check if a click event has occured and only change the Region hover state accodringly
         if (!$(regionMap).hasClass("selected")) {
             $(regionMap).css("display", "none");
         }
     });

     $("#map-container AREA").click(function() {
         $("#map-container img.region").removeClass("selected").css("display", "none");
         var regionMap = "." + $(this).attr("id") + "-map";
         $(regionMap).addClass("selected").css("display", "inline");
     });

 });


 $(document).ready(function() {
     $(".tooltip").hide();

     $("#map-container area").mousemove(function(e) {

     var regionList = '.' + $(this).attr('id') + '-list';
     var topheight = $(regionList).height() + 55;
         $(regionList).show();
         $(regionList).css({
             top: (e.pageY - topheight) + "px",
             left: (e.pageX - 45) + "px"
         });
     });
     $("#map-container area").mouseout(function(e) {
         $(".tooltip").hide();
     });
 });

1 Ответ

0 голосов
/ 07 апреля 2010

Похоже, у вас проблемы с позиционированием. Если вы поместите свою карту в div, чтобы центрировать ее, то поместите свои regionlist div вне этого div.

Подсказка должна иметь:

  • body как родитель. Это сводит к минимуму проблемы с относительным и абсолютным позиционированием.
  • Включите CSS "position: absolute".
  • иметь z-индекс больше, чем элемент, над которым вы наводите курсор
...