Dreamweaver中图片热点工具及文本框定位的综合使用-自学php网

Dreamweaver中图片热点工具及文本框定位的综合使用

来源：自学PHP网时间：2015-04-14 14:50 作者：阅读:次

[导读] 本文的目的是说明如何通过dreamweaver中的热点工具在图片上通过点击某区域，跳转到链接和函数（原先以为不能跳到函数，后来证实可以，这个很有用），同时在不把图片作为背景图的情...

本文的目的是说明如何通过dreamweaver中的热点工具在图片上通过点击某区域，跳转到链接和函数（原先以为不能跳到函数，后来证实可以，这个很有用），同时在不把图片作为背景图的情况下，如何在图片上插入文本框（以及其他的你想要的东西）。

用到的技术要点是热点工具和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

//利用DW创建热点区域，跳到需要的函数add（）
</map>

//文本框，利用css定位到图片上特定位置

</body>

通过以上技术的综合使用，可以很方便的实现一个虚拟键盘及对话框的显示，效果如图所示。

摘自 herb777的专栏

淘宝网技术发展回顾（五） Java时代：坚若磐石

猛抓点评网数据 - html/css语言栏目：html.css - 自

子栏目

Dreamweaver中图片热点工具及文本框定位的综合使用

最新评论

添加评论

更多文章推荐

添加评论