<html xmlns="">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gbk" />
<meta http-equiv="Content-Language" content="zh-CN" />
<meta name="roots" content="" />
<meta name="Keywords" content="" />
<meta name="Description" content="" />
<title>java 图片热点处理</title>
<style type="text/css">
body{
width:1024px;
margin:0 auto;
backgroundcolor:#ffffff;
color:red;
}
#username{
position: relative;
left: -626px;
top:406px;
width:122px;
}
#password{
position: relative;
left: -571px;
top:406px;
width:122px;
}
</style>
<script type="text/javascript">
function accountOnFocus(){
var area = document.createElement('input');
area.name="username";
area.id="username";
area.value="我是用户账号";
console.log(document.getElementById('us_rect'));
area.type="text";
area.style="border:1px solid green;";
document.getElementById('us_rect').appendChild(area);
area.focus();
console.log(document.getElementById('us_rect'));
}
</script>
</head>
<body>
<img src="pic.jpg" width="714" height="444" alt="java 图片热点处理" hspace="10" align="left" usemap="#newbook" border="0"/>
<map name="newbook">
<!-- coords属性设置值为左上角、右下角的坐标,各个坐标之间用逗号分开。 -->
<area shape="rect" style="border:1px solid green;" coords="583,430,678,403" href="#" onclick="alert('我是取消按钮');" alt="我是取消按钮" title="我是取消按钮"/>
<area shape="rect" coords="446,430,540,403" href="#" onclick="alert('我是登录按钮');" alt="我是登录按钮" title="我是登录按钮"/>
<input type="text" value="我是用户账号" name="username" id="username"/>
<input type="password" value="我是用户密码" name="password" id="password"/>
<!-- <area shape="rect" coords="406,430,284,406" href="#" onclick="alert('我是密码框');" alt="我是密码框" title="我是密码框">
</area>
<area shape="rect" coords="220,430,98,406" href="#" id="us_rect" onFocus="accountOnFocus()" alt="我是用户账号" title="我是用户账号">
<input type="text" name="username"/>
</area>-->
<!--右边框 下边框 左边框 上边框-->
</map>
</body>
</html>
html中map热点area的使用全部代码和效果,兼容所有浏览器
4星 · 超过85%的资源 需积分: 32 2 浏览量
2014-03-05
17:13:42
上传
评论 5
收藏 66KB ZIP 举报
业余草
- 粉丝: 1w+
- 资源: 980
最新资源
- NetOps-py通过sftp替换网络设备启动文件
- STM32单片机FPGA毕设电路原理论文报告任务驱动教学法在单片机课程教学中的应用
- STM32单片机FPGA毕设电路原理论文报告任务驱动法在单片机教学中的应用
- STM32单片机FPGA毕设电路原理论文报告人造金刚石压机智能化压力测控系统设计
- 以某列为依据匹配多项(Excel版)
- STM32单片机FPGA毕设电路原理论文报告人体短臂离心机实验台的显示控制系统
- STM32单片机FPGA毕设电路原理论文报告人工气候室监控系统的环境控制器研究
- STM32单片机FPGA毕设电路原理论文报告染整自动线张力控制系统的设计
- 数据挖掘与机器学习-实验
- 基于Linux系统Nginx的动态网站的LNMP环境源码包
资源上传下载、课程学习等过程中有任何疑问或建议,欢迎提出宝贵意见哦~我们会及时处理!
点击此处反馈
- 1
- 2
- 3
- 4
- 5
- 6
前往页