<!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. tornado框架设置

    路由 import tornado.ioloop #开启循环 让服务器一直等待请求的到来 import tornado.web #框架基本功能封装在此模块 #例子 class MainHendler( ...

  2. 与大家分享学习微信小程序开发的一些心得

    因为我也才开始学习微信小程序不久,下文也是现在的一时之言,大家有不同的想法也可以在评论里共同交流讨论,希望文章能给大家提供一点点帮助. 最近接触到了一些前端框架,像Vue.js,React,发现小程序 ...

  3. leetcode894

    class Solution { private Map<Integer, List<TreeNode>> memo; public List<TreeNode> ...

  4. [Linux]Ubuntu 16.04 远程桌面

    来源:http://blog.csdn.net/zz_1215/article/details/77921405 先吐槽一下,网上教的方法都是半桶水,都被教到连接后出现灰屏,只有这个博主(zz_121 ...

  5. JAVA_maven 配置

    前人种树: https://www.cnblogs.com/supiaopiao/p/7276805.html?utm_source=itdadao&utm_medium=referral

  6. python开发之路：python数据类型（老王版）

    python开发之路:python数据类型 你辞职当了某类似微博的社交网站的底层python开发主管,官还算高. 一次老板让你编写一个登陆的程序.咔嚓,编出来了.执行一看,我的妈,报错? 这次你又让媳 ...

  7. 【译】BERT表示的可解释性分析

    目录 从词袋模型到BERT 分析BERT表示 不考虑上下文的方法 考虑语境的方法 结论 本文翻译自Are BERT Features InterBERTible? 从词袋模型到BERT ​ Mikol ...

  8. neo4j配置（转）

    我的neo4j配置 # 修改第9行,去掉#,修改数据库名 dbms.active_database=wkq_graph.db # 修改第12行,去掉#.修改路径,改成绝对路径 dbms.directo ...

  9. 《转》完美解决微信video视频隐藏控件和内联播放问题

    地址:https://blog.csdn.net/xiao190128/article/details/81025378 var u = navigator.userAgent; var isAndr ...

  10. Java框架spring Boot学习笔记（九）：一个简单的RESTful API

    RESTful API设计需求如下: User.java package com.springboot.test; public class User { private Long id; priva ...