一种在视频OBJECT标签上放置均分四个区域的框选方法

一般在视频区域中做框样式，作应由视频插件自己来实现，但是出于其它一些原因自己琢磨了一个使用HTML标签来实现框选区域的方法，按照行外应该属于笨方法，虽然有点笨，可能在其他方面有借鉴意义，在这里拿出来跟大家分享。

对于一个视频插件OBJECT，每个边从中间点均分两份，两个相对边的中间点之间的连线也按中间点分为两份，对于每一份定义一个div标签与其对应，为了保证每份的长度不写死，使其依赖于边的宽和高，定义每份的长度为 50%，宽度定义为1px。使用绝对定位将每份的div，对应到视频对象的边上。

同时由于OBJECT属于窗口级别对象，对于任意div都不能显示在上层，即时定义z-index属性。为解决这个问题，经过查证后，在div内部预置一个<iframe>标签则可以解决这个问题。

下面给出演示代码，在chrome下可以看见框选有效，其样式需要再调节。

<html>
<body>
<div style="position:absolute; left:50%; top:50%; margin-left:-100; margin-top:-100; width:200px; height:200px;"> 


<object style="position:absolute; top:0px; left:0px;" height="200px" width="200px" type="image/jpeg" data="./meinv.jpg">
</object>


<!-- top left -->
<div id="BoxBorder_topLeft" style="width:50%; height:1px; position:absolute; top:0px; left:0px; ">
 <iframe src="javascript:false" style="position:absolute; visibility:inherit; top:0px; left:0px; width:100%; height:100%; z-index:-1;;"></iframe>
 <div style="width:100%; height:100%; background:red;"></div> 
</div>


<!-- top right -->
<div id="BoxBorder_topRight" style="width:50%; height:1px; position:absolute; top:0px; left:50%; ">
 <iframe src="javascript:false" style="position:absolute; visibility:inherit; top:0px; left:0px; width:100%; height:100%; z-index:-1;;"></iframe>
 <div style="width:100%; height:100%; background:red;"></div> 
</div>


<!-- right top -->
<div id="BoxBorder_rightTop" style="width:1px; height:50%; position:absolute; top:0px; right:0px; ">
 <iframe src="javascript:false" style="position:absolute; visibility:inherit; top:0px; left:0px; width:100%; height:100%; z-index:-1;;"></iframe>
 <div style="width:100%; height:100%; background:red;"></div> 
</div>


<!-- right down -->
<div id="BoxBorder_rightDown" style="width:1px; height:50%; position:absolute; top:50%; right:0px; ">
 <iframe src="javascript:false" style="position:absolute; visibility:inherit; top:0px; left:0px; width:100%; height:100%; z-index:-1;;"></iframe>
 <div style="width:100%; height:100%; background:red;"></div> 
</div>


<!-- bottom left -->
<div id="BoxBorder_bottomLeft" style="width:50%; height:1px; position:absolute; bottom:0px; left:0px; ">
 <iframe src="javascript:false" style="position:absolute; visibility:inherit; top:0px; left:0px; width:100%; height:100%; z-index:-1;;"></iframe>
 <div style="width:100%; height:100%; background:red;"></div> 
</div>


<!-- bottom right -->
<div id="BoxBorder_bottomRight" style="width:50%; height:1px; position:absolute; bottom:0px; right:0px; ">
 <iframe src="javascript:false" style="position:absolute; visibility:inherit; top:0px; left:0px; width:100%; height:100%; z-index:-1;;"></iframe>
 <div style="width:100%; height:100%; background:red;"></div> 
</div>


<!-- left top -->
<div id="BoxBorder_leftTop" style="width:1px; height:50%; position:absolute; top:0px; left:0px; ">
 <iframe src="javascript:false" style="position:absolute; visibility:inherit; top:0px; left:0px; width:100%; height:100%; z-index:-1;;"></iframe>
 <div style="width:100%; height:100%; background:red;"></div> 
</div>


<!-- left down -->
<div id="BoxBorder_leftDown" style="width:1px; height:50%; position:absolute; top:50%; left:0px; ">
 <iframe src="javascript:false" style="position:absolute; visibility:inherit; top:0px; left:0px; width:100%; height:100%; z-index:-1;;"></iframe>
 <div style="width:100%; height:100%; background:red;"></div> 
</div>


<!-- vertical up -->
<div id="BoxBorder_verticalUp" style="width:1px; height:50%; position:absolute; left:50%; top:0px; ">
 <iframe src="javascript:false" style="position:absolute; visibility:inherit; top:0px; left:0px; width:100%; height:100%; z-index:-1;;"></iframe>
 <div style="width:100%; height:100%; background:red;"></div> 
</div>


<!-- vertical down -->
<div id="BoxBorder_verticalDown" style="width:1px; height:50%; position:absolute; left:50%; top:50%; ">
 <iframe src="javascript:false" style="position:absolute; visibility:inherit; top:0px; left:0px; width:100%; height:100%; z-index:-1;;"></iframe>
 <div style="width:100%; height:100%; background:red;"></div> 
</div>


<!-- horizon left -->
<div id="BoxBorder_horizonLeft" style="width:50%; height:1px; position:absolute; left:0px; top:50%; ">
 <iframe src="javascript:false" style="position:absolute; visibility:inherit; top:0px; left:0px; width:100%; height:100%; z-index:-1;;"></iframe>
 <div style="width:100%; height:100%; background:red;"></div> 
</div>


<!-- horizon right -->
<div id="BoxBorder_horizonRight" style="width:50%; height:1px; position:absolute; left:50%; top:50%; ">
 <iframe src="javascript:false" style="position:absolute; visibility:inherit; top:0px; left:0px; width:100%; height:100%; z-index:-1;;"></iframe>
 <div style="width:100%; height:100%; background:red;"></div> 
</div>


<script>window.createPopup();</script>
</div>
</body>
</html>