<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档</title>
<script type="text/javascript">
function getOffset(obj){
    var x = obj.offsetLeft, y = obj.offsetTop;
    while(obj.offsetParent){
        obj = obj.offsetParent;
        x += obj.offsetLeft;
        y += obj.offsetTop;
    }
    return {x : x, y : y};
};
function showBorder(obj){
    var img = document.getElementById("bd");
    var div = document.getElementById("border");
    var offset = getOffset(img);
    var coords = obj.coords.split(",");
     
    div.style.display = "block";
    div.style.left = offset.x + parseInt(coords[0]) + "px";
    div.style.top = offset.y + parseInt(coords[1]) + "px";
    div.style.width = parseInt(coords[2]) - parseInt(coords[0]) + "px";
    div.style.height = parseInt(coords[3]) - parseInt(coords[1]) + "px";
}
function hideBorder(){
    document.getElementById("border").style.display = "none";
}
</script>
</head>
 
<body>
<img src="http://www.baidu.com/img/baidu_logo.gif" width="270" height="129" border="0" usemap="#bdMap" id="bd" />
<map name="bdMap" id="bdMap">
  <area shape="rect" coords="35,22,115,97" onmouseover="showBorder(this);" onmouseout="hideBorder()" />
  <area shape="rect" coords="158,26,238,94" onmouseover="showBorder(this);" onmouseout="hideBorder()" />
</map>
<div id="border" style="display:none; position:absolute;border:2px solid #FF0000; "></div>
</body>
</html>

给area标签添加红色边框的更多相关文章

  1. Knockout: 使用knockout validation插件进行校验, 给未通过校验的输入框添加红色边框突出显示.

    之前整理了三篇帖子: Knockout: 使用CSS绑定和event的blur失去焦点事件, 给未通过校验的输入框添加红色边框突出显示. http://www.cnblogs.com/liuzhend ...

  2. Knockout: 使用CSS绑定和event的blur失去焦点事件, 给未通过校验的输入框添加红色边框突出显示.

    目的:使用knockout提供的机制实现输入框失去焦点后的校验工作,并使用CSS绑定给未通过校验的输入框添加红色边框突出显示. 步骤: 先在htm中添加.error的css样式, 并在输入框中的dat ...

  3. 给奇数的li标签添加蓝色，给偶数的li标签添加红色

    今天遇到的面试题,哎,不看参考手册还是写的蛋疼啊!给奇数的li标签添加红色,给偶数的li标签添加蓝色 直接撸代码吧: <!DOCTYPE html> <html lang=" ...

  4. Knockout: 实践CSS绑定和jQuery的blur失去焦点事件, 给未通过校验的输入框添加红色边框突出显示.

    目的: 实践一下Knockout提供的CSS绑定功能和JQuery的blur失去焦点事件, 这次不使用Knockout的afterkeydown事件了． 步骤: 先在htm中添加.error的css样 ...

  5. Knockout: 实践CSS绑定和afterkeydown事件, 给未通过校验的输入框添加红色边框突出显示; 使用afterkeydown事件自动将输入转大写字母.

    目的: 实践一下Knockout提供的CSS绑定功能和afterkeydown事件． 步骤: 先在htm中添加.error的css样式, 并在输入框中绑定css: { error: !firstNam ...

  6. ExtJS4为form表单必填项添加红色*标识

    通常情况下,ExtJS4的form表单必填项在输入状态下会有特殊提示,非输入状态下,显示却和其他项没有任何区别.为使必填项更加容易区分,我们需要根据allowBlank的属性值,为form表单中的必填 ...

  7. html area标签详解

    <area> 标签定义图像映射中的区域(注:图像映射指得是带有可点击区域的图像). area 元素总是嵌套在 <map> 标签中. 注:<img> 标签中的 use ...

  8. HTML图片热区 map area 标签

    实例 <img src ="planets.gif" alt="Planets" usemap ="#planetmap" /> ...

  9. html中map标签和area标签的应用

    map标签的用途:是与img标签绑定使用的,常被用来赋予给客户端图像某处区域特殊的含义,点击该区域可跳转到新的文档. 因为map标签是与img标签绑定使用的,所以我们需要给map标签添加ID和name ...

随机推荐

  1. Linux命令、脚本

    1.传文件 FTP/SFTP:ftp 用户名@远程ip SCP:注意ip后有个   : 本地文件发到远程 scp 本地文件 用户名@远程ip:远程路径   远程文件发到本地 scp 用户名@远程ip: ...

  2. python3 正则匹配[^abc]和(?!abc)的区别（把多个字符作为一个整体匹配排除）

    目的:把数字后面不为abc的字符串找出来 如1ab符合要求,2abc不符合要求 str = '1ab' out = re.match(r'\d+(?!abc)',str) str1 = '1abc' ...

  3. RPM包指令总结

    一.RPM RPM包安装位置 RPM包默认安装路径 /etc/ 配置文件安装目录 /usr/bin/ 可执行的命令安装目录 /usr/lib/ 程序所使用的函数库保存位置 /usr/share/doc ...

  4. mybatis学习1

    一.mybatis步骤 1.根据xml配置文件(全局配置文件)创建一个SqlSessionFactory对象 有数据源一些运行环境信息2.sql映射文件:配置了每一个sql,以及sql的封装规则等. ...

  5. vim 批量替换使用说明

    基本语法: :[addr]s/源字符串/目的字符串/[option] 全局替换命令: :%s/源字符串/目的字符串/g [addr] 表示检索范围,省略时表示当前行. "1,20" ...

  6. 手动(原生ajax)和自动发送ajax请求 伪ajax(Ifrname)

    自动发送  ---> 依赖jQuery文件 实例-->GET请求: function AjaxSubmit() { $.ajax({ url:'/data', type:"GET ...

  7. Delphi 10.3中使用JSON

    有一个对JSON处理的单元,在你需要使用JSON的单元里面引入"System.json",随后你就可以用Delphi自己的json处理类了. 注意:   1,JSON类创建后,里面 ...

  8. 获得随机N位数不重复数字

    1, 总结下:每个Random实例里面有一个原子性的种子变量用来记录当前的种子的值,当要生成新的随机数时候要根据当前种子计算新的种子并更新回原子变量.多线程下使用单个Random实例生成随机数时候,多 ...

  9. 页面启动jquery

  10. html初识form表单

    定义和用法 <form> 标签用于为用户输入创建 HTML 表单. 表单能够包含 input 元素,比如文本字段.复选框.单选框.提交按钮等等. 表单用于向服务器传输数据.通过submit ...