Dreamweaver中圖片熱點工具及文字框定位的綜合使用
本文的目的是說明如何通過dreamweaver中的熱點工具在圖片上通過點選某區域，跳轉到連結和函式（原先以為不能跳到函式，後來證實可以，這個很有用），同時在不把圖片作為背景圖的情況下，如何在圖片上插入文字框（以及其他的你想要的東西）。
用到的技術要點是熱點工具和css絕對定位。
具體程式碼如下所示：
<style type="text/css">
#bjlsh{position:absolute; //css絕對定位，通過ID：bjlsh來使用該樣式
top :238px; //注意數字和”px“之間是沒有空格的，否則會出錯
left:338px;
}
</style>
//此處省略若干
<body>
<img src="../image/xiangqing.jpg" align="middle" width="1024" height="768"border="0" usemap="#Map"/>
<map name="Map" id="Map">
<area shape="rect" coords="866,659,972,704" href="<%=path%>/cmp- page/bjcx/hallwork_bjcx.jsp" />
//利用DW建立熱點區域，連結到href
<area shape="rect" coords="633,278,696,345" onclick="add(1)" />
//利用DW建立熱點區域，跳到需要的函式add（）
</map>
<input id="bjlsh" type="text" style="width:545px; height:36px; font-size:30px" value=<%=bjlsh%> />
//文字框，利用css定位到圖片上特定位置
</body>
通過以上技術的綜合使用，可以很方便的實現一個虛擬鍵盤及對話方塊的顯示，效果如圖所示。