一般在视频区域中做框样式，作应由视频插件自己来实现，但是出于其它一些原因自己琢磨了一个使用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>

一种在视频OBJECT标签上放置均分四个区域的框选方法的更多相关文章

  1. MVC下form表单一次上传多种类型的图片（每种类型的图片可以上传多张）

    form表单一次上传多种类型的图片(每种类型的图片可以上传多张) controller中的action方法 public ActionResult UploadImage( )        { in ...

  2. 视频直播 object 标签属性详解

    最近在做视频直播这一块的,html5的video不能实现此功能,在网上查找了资料,觉得很有用. 一.介绍: 我们要在网页中正常显示flash内容,那么页面中必须要有指定flash路径的标签.也就是OB ...

  3. html中object标签详解

        定义和用法 object标签定义一个嵌入的对象.请使用此元素向您的 XHTML 页面添加多媒体.此元素允许您规定插入 HTML 文档中的对象的数据和参数,以及可用来显示和操作数据的代码. &l ...

  4. html标签之Object标签详解

    定义和用法 定义一个嵌入的对象.请使用此元素向您的 XHTML 页面添加多媒体.此元素允许您规定插入 HTML 文档中的对象的数据和参数,以及可用来显示和操作数据的代码. <object> ...

  5. 【转载】html中object标签详解

    [转载自http://blog.csdn.net/soliy/archive/2010/03/22/5404183.aspx] html标签之Object标签详解 作者:网络    出处:网络     ...

  6. HTML的<Object>标签怎么用？

    <object>标签是一个HTML标签,用于在网页中显示音频,视频,图像,PDF和Flash等多媒体:它通常用于嵌入由浏览器插件处理的Flash页面元素,如Flash和Java项目.它还可 ...

  7. 来吧，HTML5之基础标签(上)

    什么是html5 HTML 5 是下一代的 HTML.HTML5 仍处于完善之中.然而,大部分现代浏览器已经具备了某些 HTML5 支持. 学习过程中标签的理解 <a>标签  定义超链接, ...

  8. HTML的<object>标签 (转)

    object标签用于定义一个嵌入的对象,包括:图像.音频.Java applets.ActiveX.PDF以及Flash.该标签允许您规定插入HTML文档中的对象的数据和参数,以及可用来显示和操作数据 ...

  9. object标签和embed标签

    概述 html中有许多用于嵌入各种类型内容的标签,包括:embed,audio,canvas,iframe,img,math,object,svg和video.之前我在很多地方都看到了object标签 ...

随机推荐

  1. JavaScript进阶（二）

    什么是事件 JavaScript 创建动态页面.事件是可以被 JavaScript 侦测到的行为. 网页中的每个元素都可以产生某些可以触发 JavaScript 函数或程序的事件. 比如说,当用户单击 ...

  2. 严重: Error configuring application listener of class org.springframework.web.context.ContextLoaderListener

    严重: Error configuring application listener of class org.springframework.web.context.ContextLoaderLis ...

  3. php关于金额比较引发的问题（转）

    做电子商务的时候一般会涉及到金额的比较,按正常的思路来看用><=这些个符号就可以了.可是要是到程序上来搞这个的话就出大事了.现在看下这段代码: $f = 0.07; var_dump($f ...

  4. Curl参数一览

    * 目录 1. 介绍 2. curl扩展的安装 3. curl_init 4. curl_setopt 5. curl_exec 6. curl_close 7. curl_version * 介绍 ...

  5. JAVA代码实现下载单个文件，和下载打包文件

    //下载单个文件调用方法 /**     * response     * imgPath 下载图片地址    * fileName 保存下载文件名称    * @date 2015年4月14日 下午 ...

  6. Jquery各个版本的区别

    一: 一般原则是越新越好,jQuery版本是在不断进步和发展的,最新版是当时最高技术水平,也是最先进的技术理念. 但个人的角度来看.是最新版本x.x.0的上一版本最好.比如说1.10.0版,上一版本是 ...

  7. Hibernate SQLQuery简单实用，做链接查询

    工单里面可能有0个告警,一个或多个告警,当工单中没有告警的时候也需要将工单显示出来,所以就需要使用工单和告警的做链接查询,下面是具体实例 表: CREATE TABLE `alarm` ( `id` ...

  8. java继承内部类问题（java编程思想笔记）

    普通内部类默认持有指向所属外部类的引用.如果新定义一个类来继承内部类,那“秘密”的引用该如何初始化? java提供了特殊的语法: class Egg2 { public class Yolk{ pub ...

  9. php吧字符串直接转换成数组处理

    $str ='123456'; echo strlen($str) - 1; echo '<br>'; echo $str{strlen($str) - 1}; echo '<br& ...

  10. jdk安装配置具体分析

    JDK 选择安装目录 安装过程中会出现两次 安装提示 .第一次是安装 jdk ,第二次是安装 jre .建议两个都安装在同一个java文件夹中的不同文件夹中.(不能都安装在java文件夹的根目录下,j ...