响应式绝对定位

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);