响应绝对定位

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