[ASP.NET] 在圖片上自訂文字的位置

下圖是結果的例子，要在圖片上標示一些文字，通常只需要請 UI 在圖片上做處理即可，但是卻被要求能有後台自己調整要顯示的文字和位置。

最後想到的做法很簡單，只要運用絕對位置(position:absolute)就能輕易辦到了，但限制是圖片的大小要固定才行。

首先，後台放圖片，讓使用者在圖片上點選要顯示文字的坐標位置並記下來，如下圖：

 

 之後前台顯示時，將記下來的坐標當作絕對位置 div 的 top 和 left 就完成了。

<div id="mapDiv1">
    <!--將記錄下的X、Y座標放到left、top即可-->
    <div style="position:absolute;top: 97px;left: 209px;">新疆</div>
    <div style="position:absolute;top: 210px;left: 413px;">湖北</div>
    <div style="position:absolute;top: 195px;left: 474px;">上海</div>
    <div style="position:absolute;top: 252px;left: 461px;">福建</div>

    <!--底圖要固定成原始大小，因為記錄的是絕對座標-->
    <img src="mapbg.jpg" width="633" height="336">
</div>

下載範例