<!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. django2.0再写一行代码

    基础 @LTS长期支持 @django-admin startproject xxx python manage.py runserver python manage.py startapp xxx ...

  2. loadrunner-参数化

    参数化的目的: 1.数据库或应用程序对提交请求里的参数值进行唯一性校验 2.为了避免查询缓存导致的性能测试结果失真 (语法检查-语意检查-检查缓存(有直接从数据库给)没有就生成执行计划-按照执行计划去 ...

  3. 获取的是 string 类型的字段，直接输出 数字 或者 需要的第几行

    Freight = driver.find_element_by_xpath("//tbody/tr/td[6]").text print(type(Freight)) # 这里输 ...

  4. WIN SERVER 2012 自启动tomcat

    本来手动启动时在开始cmd输入startup 自启动的方法是https://blog.csdn.net/ailo555/article/details/82754005 Windows Server ...

  5. 深度学习原理与框架-图像补全(原理与代码) 1.tf.nn.moments(求平均值和标准差) 2.tf.control_dependencies(先执行内部操作) 3.tf.cond(判别执行前或后函数) 4.tf.nn.atrous_conv2d 5.tf.nn.conv2d_transpose(反卷积) 7.tf.train.get_checkpoint_state(判断sess是否存在

    1. tf.nn.moments(x, axes=[0, 1, 2])  # 对前三个维度求平均值和标准差,结果为最后一个维度,即对每个feature_map求平均值和标准差 参数说明:x为输入的fe ...

  6. Django项目创建

    一.创建方式 1.命令行创建: 2.pycharm创建项目: 二.创建MySQL数据库 三.修改配置文件链接数据库 修改python连接数据库方式 四.Django配置 1.添加app项目 2.修改h ...

  7. Spark环境搭建

    转载:https://blog.csdn.net/songhaifengshuaige/article/details/79480491

  8. 剑指offer——二叉树的镜像

    题目:操作给定的二叉树,将其变换为源二叉树的镜像. 思路:前序(根左右的顺序)遍历一棵树,在存储的时候将其左右树进行交换,最后按照处理后的树还原,即得到其镜像. /** public class Tr ...

  9. Java读取excel数据保存入库

    Java开发读取excel表格数据入库保存: List<Map<String, Object>> list = null; String filePath = filePath ...

  10. Reactive Programming

    Reactive的表现 Reactive 规范是 JVM Reactive 扩展规范 Reactive Streams JVM,而 Reactive 实现框架则是最典型的实现: Reactive St ...