<!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. Vue stage3

    <body> <div id="box1"> <div v-bind:class="{ 'active': isActive, 'error ...

  2. selenium2 webdriver 常用的python 函数

    新建实例driver = webdriver.Chrome() 1.通过标签属性Id查找元素 方法:find_element_by_id(element_id) 实例:driver.find_elem ...

  3. css 效果之转换

    在css3 中,有一个转换效果,也可以替代js,并且比 js 做得好,那就是转换,即transform 属性,只需要个这个属性加上值,就可以实现转化效果了;有三种值,平移(translate),旋转( ...

  4. Hadoop Java API操作HDFS文件系统（Mac）

    1.下载Hadoop的压缩包 tar.gz   https://mirrors.tuna.tsinghua.edu.cn/apache/hadoop/common/stable/ 2.关联jar包 在 ...

  5. Jenkins+Git+Maven构建并部署springboot（构建多模块中的单个模块）

    主要思路:1.jenkins从git中拉取项目源码:jenkins使用maven构建并将生成的jar包通过shell脚本启动. 环境:环境:Centos7.Maven3.5.3.git(单机) 准备工 ...

  6. 遇到的[]bug

    "Runtime Error Message:reference binding to null pointer of type 'struct value_type' Last execu ...

  7. ajax原生实现

    <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/ ...

  8. C++指针和字符串

    ]="rose'; cout<<flowers<<endl; 数组名是第一个元素的地址,

  9. docker容器跑redis

    命令行配置: $ docker search redis $ docker pull docker.io/redis $ mkdir -p /redis/etc/conf /redis/lib  /r ...

  10. js 一键复制

    function copyURL(id){ var siteId=$("#siteId").val() var oInput = document.createElement('i ...