2014-10-29

[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>


下載範例

沒有留言:

張貼留言