/gist:2c9ec1107b9ce0142140

## gistfile1.txt
<!doctype html>
<html>
 <head>
  <meta charset="UTF-8">
  <title>模版</title>
  <style>
    /* reset */
    html,body,h1,h2,h3,h4,h5,h6,div,dl,dt,dd,ul,ol,li,p,blockquote,pre,hr,figure,table,caption,th,td,form,fieldset,legend,input,button,textarea,menu{margin:0;padding:0;}
    header,footer,section,article,aside,nav,hgroup,address,figure,figcaption,menu,details{display:block;}
    table{border-collapse:collapse;border-spacing:0;}
    caption,th{text-align:left;font-weight:normal;}
    html,body,fieldset,img,iframe,abbr{border:0;}
    i,cite,em,var,address,dfn{font-style:normal;}
    [hidefocus],summary{outline:0;}
    li{list-style:none;}
    h1,h2,h3,h4,h5,h6,small{font-size:100%;}
    sup,sub{font-size:83%;}
    pre,code,kbd,samp{font-family:inherit;}
    q:before,q:after{content:none;}
    textarea{overflow:auto;resize:none;}
    label,summary{cursor:default;}
    a,button{cursor:pointer;}
    h1,h2,h3,h4,h5,h6,em,strong,b{font-weight:bold;}
    del,ins,u,s,a,a:hover{text-decoration:none;}
    body,textarea,input,button,select,keygen,legend{font:12px/1.14 arial,\5b8b\4f53;color:#333;outline:0;}
    body{background:#fff;}
    a,a:hover{color:#333;}

    /*自定义样式*/
    html,body {
    padding: 0;
    margin: 0;
    width: 100%;
    height: 100%;
    font-family: Helvetica,Tahoma,Arial,STXihei,"STHeiti Light","Microsoft YaHei",SimSun,SimHei,sans-serif;
    }
    #course_select{width:100%;}
    #course_select tr td{text-align:center;}
  </style>
  <script src="http://dwz.cn/jquery111"></script>
 </head>
 <body>
    <table id="course_select">
      <tr>
        <td style="width:70%;"><br/>前面blablablablablablabla
            <div style="display:inline-block;"><img src="http://p5.yokacdn.com/pic/star/topic/2014/U230P1T1D925309F9DT20140519091616.jpg" id="img"></div>
            后面blablablablablablablablablablablabla
        </td>
        <td style="width:30%;">
        <div>
        <p>在图片上产生一个矩形的遮罩</p>
          <p>首先将焦点定位在start输入框 然后点击图片上要产生的矩形的左上角位置</p>
          <p>再将焦点定位在end输入框，最后点击图片上要产生矩形的右下角位置</p>
         <p> 点击 计算 可预览效果</p>
          <p>点击 清除  可关闭预览效果</p>
            <label><h3>start</h3></label>
            <input type="text" id="start" style="zoom: 2;">
        </div>
        <div  style="margin-top:5px;">
            <label><h3>end</h3></label>
            <input type="text" id="end" style="zoom: 2;">
        </div>
        <div  style="margin-top:5px;">
        <button id="OK">计算</button>
        <button id="clear">清除</button></div>
        </td>
      </tr>
    </table>
<script>
var mousePosition = function(ev) {
  if (ev.offsetX || ev.offsetY){
    return {x: ev.offsetX,y: ev.offsetY};
  }else if (ev.layerX || ev.layerY) {
    return {x: ev.layerX,y: ev.layerY};
  }else{
    console.log(ev);
    return {x:(ev.clientX-ev.currentTarget.offsetLeft),y:(ev.clientY-ev.currentTarget.offsetTop)}
    //return false;
  }
}
  $(document).ready(function(){
        var point = "start";
        $("#start,#end").css({"border": "1px solid #00bc3e"});
        //图片的事件
        $("#img").click(function(e){
            //获取鼠标当前位置
            var mouse_coordinates = mousePosition(e);
            console.dir(mouse_coordinates);
            $("#"+point+"").val([mouse_coordinates.x,mouse_coordinates.y].join());
            return false;
        });
        //控件输入定位
        $("#start,#end").click(function(){
            $("#start,#end").css({"border": "1px solid #00bc3e"});
            point = $(this).attr("id");
            $("#"+point).css({"border": "1px solid #aa0000"});
            return false;
        });
        //计算输入的矩形
        $("#OK").click(function(){
            var start  = $("#start").val();
            var end   = $("#end").val();
            if( start.match(/^\d+,\d+$/) === null ||  end.match(/^\d+,\d+$/) === null ){
                alert("坐标的值错误，请重新确认后计算");
                return false;
            }
            start = start.split(",");
            end = end.split(",");

            var width = end[0]-start[0];
            var height= end[1]-start[1];
            if(width<=0 || height<=0){
                alert("坐标必须是[左上][右下]两个点，请确认位置");
                return false;
            }
            var top = parseInt(start[1]);
            var left = parseInt(start[0]);
            $("#img").parent().css("position","relative");
            var html = "<div style=\"width:"+width+"px;height:"+height+"px;background:rgba(255, 0, 0, 0.56);position: absolute;top:"+top+"px;left:"+left+"px;\">&nbsp;</div>";
            $("#img").parent().append(html);
            return false;
        });
        $("#clear").click(function(){
          $("#img ~ div").remove();
          return false;
        });
  });
</script>
 </body>
</html>
	<!doctype html>
	<html>
	<head>
	<meta charset="UTF-8">
	<title>模版</title>
	<style>
	/* reset */
	html,body,h1,h2,h3,h4,h5,h6,div,dl,dt,dd,ul,ol,li,p,blockquote,pre,hr,figure,table,caption,th,td,form,fieldset,legend,input,button,textarea,menu{margin:0;padding:0;}
	header,footer,section,article,aside,nav,hgroup,address,figure,figcaption,menu,details{display:block;}
	table{border-collapse:collapse;border-spacing:0;}
	caption,th{text-align:left;font-weight:normal;}
	html,body,fieldset,img,iframe,abbr{border:0;}
	i,cite,em,var,address,dfn{font-style:normal;}
	[hidefocus],summary{outline:0;}
	li{list-style:none;}
	h1,h2,h3,h4,h5,h6,small{font-size:100%;}
	sup,sub{font-size:83%;}
	pre,code,kbd,samp{font-family:inherit;}
	q:before,q:after{content:none;}
	textarea{overflow:auto;resize:none;}
	label,summary{cursor:default;}
	a,button{cursor:pointer;}
	h1,h2,h3,h4,h5,h6,em,strong,b{font-weight:bold;}
	del,ins,u,s,a,a:hover{text-decoration:none;}
	body,textarea,input,button,select,keygen,legend{font:12px/1.14 arial,\5b8b\4f53;color:#333;outline:0;}
	body{background:#fff;}
	a,a:hover{color:#333;}

	/自定义样式/
	html,body {
	padding: 0;
	margin: 0;
	width: 100%;
	height: 100%;
	font-family: Helvetica,Tahoma,Arial,STXihei,"STHeiti Light","Microsoft YaHei",SimSun,SimHei,sans-serif;
	}
	#course_select{width:100%;}
	#course_select tr td{text-align:center;}
	</style>
	<script src="http://dwz.cn/jquery111"></script>
	</head>
	<body>
	<table id="course_select">
	<tr>
	<td style="width:70%;"><br/>前面blablablablablablabla
	<div style="display:inline-block;"><img src="http://p5.yokacdn.com/pic/star/topic/2014/U230P1T1D925309F9DT20140519091616.jpg" id="img"></div>
	后面blablablablablablablablablablablabla
	</td>
	<td style="width:30%;">
	<div>
	<p>在图片上产生一个矩形的遮罩</p>
	<p>首先将焦点定位在start输入框然后点击图片上要产生的矩形的左上角位置</p>
	<p>再将焦点定位在end输入框，最后点击图片上要产生矩形的右下角位置</p>
	<p> 点击计算可预览效果</p>
	<p>点击清除可关闭预览效果</p>
	<label><h3>start</h3></label>
	<input type="text" id="start" style="zoom: 2;">
	</div>
	<div style="margin-top:5px;">
	<label><h3>end</h3></label>
	<input type="text" id="end" style="zoom: 2;">
	</div>
	<div style="margin-top:5px;">
	<button id="OK">计算</button>
	<button id="clear">清除</button></div>
	</td>
	</tr>
	</table>
	<script>
	var mousePosition = function(ev) {
	if (ev.offsetX \|\| ev.offsetY){
	return {x: ev.offsetX,y: ev.offsetY};
	}else if (ev.layerX \|\| ev.layerY) {
	return {x: ev.layerX,y: ev.layerY};
	}else{
	console.log(ev);
	return {x:(ev.clientX-ev.currentTarget.offsetLeft),y:(ev.clientY-ev.currentTarget.offsetTop)}
	//return false;
	}
	}
	$(document).ready(function(){
	var point = "start";
	$("#start,#end").css({"border": "1px solid #00bc3e"});
	//图片的事件
	$("#img").click(function(e){
	//获取鼠标当前位置
	var mouse_coordinates = mousePosition(e);
	console.dir(mouse_coordinates);
	$("#"+point+"").val([mouse_coordinates.x,mouse_coordinates.y].join());
	return false;
	});
	//控件输入定位
	$("#start,#end").click(function(){
	$("#start,#end").css({"border": "1px solid #00bc3e"});
	point = $(this).attr("id");
	$("#"+point).css({"border": "1px solid #aa0000"});
	return false;
	});
	//计算输入的矩形
	$("#OK").click(function(){
	var start = $("#start").val();
	var end = $("#end").val();
	if( start.match(/^\d+,\d+$/) === null \|\| end.match(/^\d+,\d+$/) === null ){
	alert("坐标的值错误，请重新确认后计算");
	return false;
	}
	start = start.split(",");
	end = end.split(",");

	var width = end[0]-start[0];
	var height= end[1]-start[1];
	if(width<=0 \|\| height<=0){
	alert("坐标必须是[左上][右下]两个点，请确认位置");
	return false;
	}
	var top = parseInt(start[1]);
	var left = parseInt(start[0]);
	$("#img").parent().css("position","relative");
	var html = "<div style=\"width:"+width+"px;height:"+height+"px;background:rgba(255, 0, 0, 0.56);position: absolute;top:"+top+"px;left:"+left+"px;\"> </div>";
	$("#img").parent().append(html);
	return false;
	});
	$("#clear").click(function(){
	$("#img ~ div").remove();
	return false;
	});
	});
	</script>
	</body>
	</html>