Отзывчивое абсолютное позиционирование

Question

Я пытаюсь добавить эффект зависания для каждого речевого пузыря на изображении ниже этой ссылки на другую страницу при нажатии.

В настоящее время я использую карту изображения и всякий раз, когда область зависания над jQuery изменяет все изображение, чтобы быть соответствующим изображением, в котором заполнен пузырь речи. Это вроде работает, но IE мерцает каждый раз, когда происходит зависание и веб-сайт реагирует, поэтому карта изображения не масштабируется при изменении размера экрана. Я тоже пробовал использовать https://github.com/stowball/jQuery-rwdImageMaps, но он не работает на мобильном устройстве.

В идеале я хотел бы, чтобы речевые пузыри были отдельными изображениями, которые правильно расположены при масштабировании, чтобы я мог легче манипулировать речевыми пузырями.

Скриншот

Answer 1

Вы могли бы пойти с подходом, который использует масштабируемые координаты.

Вот основная идея:

var coordManager = { 
     "imageBaseHeight":800, 
     "imageBaseWidth":800, 
     "imageID":"myImg", 
     "baseCoordinateActions" = [ 
      {"x":10,"y":10,"h":100,"w":100, "text": "Mousing over first option"}, // the square you want the mouseover to cover for a given action 
      {"x":200,"y":200,"h":100,"w":100, "text": "Mousing over first option"} 
     ], 
     "scaledCoordinateActions" : [], // this should contain the baseCoordinateActions with the scaled values 
     "init" : function(id, baseHeight, baseWidth) 
     { 
      var self=this; 
      this.imageID=id; 
      this.imageBaseHeight=baseHeight; 
      this.imageBaseWith=baseWidth; 
      var img = document.getElementById(id); 
      img.onresize =function() 
      { 
       // regenerate the scaled coordinates based on the difference between the imageBaseHeight and the current height; 
       // usually you can get the scale by dividing the imageBaseHeight by the actual height 
      }; 
      image.onmousemove = function(event) 
      { 
       // check the mouse location based on scaled coordinates if it's within the scaled coordinates of any of the scaledCoordinateAction items 
       // display that scaleCoordinateAction item's text using the current eventX and Y, or do it relative to the coordinateACtion X and Y. 
       // make sure to check if the bubble is already showing before changing the display: property to avoid flicker. 
      } 
     } 
    }; 

    coordManager.init("imageID", 800,800);