本文详细介绍了如何在Dreamweaver中利用热点工具创建点击图片区域跳转链接或调用函数的功能，并展示了如何在不设图片为背景的情况下，在图片上插入并定位文本框。通过结合CSS绝对定位，可以实现复杂的交互效果，例如虚拟键盘和对话框的展示。
本文的目的是说明如何通过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>
通过以上技术的综合使用，可以很方便的实现一个虚拟键盘及对话框的显示，效果如图所示。
扫一扫
548
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
