懸浮坐标解決方案：如何在圖檔擷取xy滑鼠位置和增加标注資訊

懸浮坐标的定義，基于固定分辨率的圖檔，通過擷取該圖檔x和y坐标确定位置後并添加标注，實作位置展示、對應圖檔内物品展示的一種标注開發方式。

技術要點

1. 自動擷取圖檔x和y坐标；
2. 将多個坐标xy在圖檔上通過CSS定位的方式予以展示；
3. 滑鼠高亮提示事件；
4. 滑鼠點選事件；

css層疊樣式表

• 由于不同電腦裝置的分辨率不同，是以在使用圖檔懸浮坐标定位的時候，一般需要将圖檔設定成固定尺寸。基于19201080，16:9分辨率顯示器，一般推薦1600900的彈窗展示。
• 為了避免彈出圖檔無法覆寫，建議設定對應的背景顔色；
• 實作原理：基于css層疊樣式表各元素利用position: relative和position:absolute，相對定位和絕對定位，分層分級加載展示。

.container {
            position: relative;
            width: 1600px;
            margin: 0 auto;
            padding: 0;
        }

        .lockImg {
            position: absolute;
            cursor: pointer;
        }      

HTML圖檔容器展示

<div class="container">
     <!--圖檔-->
     <img src="images/main.jpg" id="hotImg">
      <!--懸浮坐标點位-->
    <img src="images/icon.png" style="left:calc(76px - 16px);top:calc(158px - 36px);" class="lockImg">
    <img src="images/icon.png" style="left:calc(232px - 16px);top:calc(328px - 36px);" class="lockImg">
    <img src="images/icon.png" style="left:calc(364px - 16px);top:calc(306px - 36px);" class="lockImg">
    <img src="images/icon.png" style="left:calc(615px - 16px);top:calc(209px - 36px);" class="lockImg">
</div>      

• ​

  ​style="left:calc(76px - 16px);top:calc(158px - 36px)​

  ​，因标注icon本身是圖檔，具有長寬屬性，在進行absolute定位時，需要把已經确定的xy坐标進行相對應的offset偏離設定；
• offset中的16px和36px，具體的值依據icon圖檔的尺寸大小手動調整，能準确辨別對應的圖檔位置即可。

擷取圖檔xy坐标

(1)JQ封裝函數方式

圖檔事件

<img id="imageId" src="images/main.jpg" onclick="handleClick(event)">      

擷取坐标封裝函數

//擷取滑鼠點選位置
    function lockClick(e) {
        var xPage = (navigator.appName == 'Netscape') ? e.pageX : event.x + document.body.scrollLeft;
        var yPage = (navigator.appName == 'Netscape') ? e.pageY : event.y + document.body.scrollTop;
        var imgEl = document.getElementById("imageId");
        var img_x = locationLeft(imgEl);
        var img_y = locationTop(imgEl);
        var xPos = xPage - img_x;
        var yPos = yPage - img_y;

        //目前點選位置
        var hotspot = {x: xPos, y: yPos};
        /*01.在目前為準展示圖檔*/
        addHotspot(hotspot);
        /*02.通過ajax接口将x、y坐标傳入到資料庫*/
    }      

//找到元素的螢幕位置
    function locationLeft(element) {
        offsetTotal = element.offsetLeft;
        scrollTotal = 0; //element.scrollLeft but we dont want to deal with scrolling - already in page coords
        if (element.tagName != "BODY") {
            if (element.offsetParent != null)
                return offsetTotal + scrollTotal + locationLeft(element.offsetParent);
        }
        return offsetTotal + scrollTotal;
    }

    //find the screen location of an element
    function locationTop(element) {
        offsetTotal = element.offsetTop;
        scrollTotal = 0; //element.scrollTop but we dont want to deal with scrolling - already in page coords
        if (element.tagName != "BODY") {
            if (element.offsetParent != null)
                return offsetTotal + scrollTotal + locationTop(element.offsetParent);
        }
        return offsetTotal + scrollTotal;
    }      

// 添加自定義内容
    function addHotspot(hotspot) {
        var x = hotspot.x - 16;
        var y = hotspot.y - 36;
        var src = 'images/icon.png';

        var imgEle = '<img ' + ' src="' + src + '"  style="top: '
            + y + 'px; left: ' + x + 'px; position: absolute; cursor: pointer;"'
            + ')" />';
        $('.container').append(imgEle);
    }      

(2)使用php中的POST傳參

使用input image類型傳參

<form action="getCoords.php" method="post">
        <input type="image" src="images/main.jpg" id="hotImg">
    </form>      

getCoords.php

$cord = $_POST;
echo "<pre>";
echo "x坐标:" . $cord["x"];
echo "<pre>";
echo "y坐标:" . $cord["y"];