文档章节

area

疏影横斜
 疏影横斜
发布于 2018/11/14 13:15
字数 248
阅读 4
收藏 0
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title></title>
	<script src="img/jquery-1.10.1.js" type="text/javascript"></script>
	
	<style type="text/css">
        * { margin:0; padding:0; text-align:center;}
        body {TEXT-ALIGN: center;}
        #center { MARGIN-RIGHT: auto; MARGIN-LEFT: auto; }
    </style>
    <script type="text/javascript">
        $(document).ready(function () {
            var canvers = document.getElementById("diagonal");
            var context = canvers.getContext("2d");
            context.globalAlpha = 0.5;

            $("#Map area").each(function () {
                //$(this).mouseover(function () {

                    context.beginPath();
                    //定义一数组
                    var strs = $(this).attr("coords").split(",");
                    var i1, i2;
                    for (var i = 0; i < strs.length; i++) {
                        if (i % 2 === 0) {
                            i1 = strs[i];
                        }
                        if (i % 2 === 1) {
                            i2 = strs[i];
                            if (i === 1) {
                                context.moveTo(i1, i2);
                            }
                            else {
                                context.lineTo(i1, i2);
                            }
                        }
                    }
                    context.fillStyle = "#333333";
                    context.fill();

                    context.closePath(); //闭合
                //});
                //$(this).mouseout(function () {
                  //  context.clearRect(0, 0, 750, 528);
                //});
            });
        });
    </script>
	
</head>      
<body>
	<div id="center" style="width:750px;">
        <div style="display: block; background: url('img/1.jpg') repeat scroll 0% 0% transparent; padding: 0px; width: 750px; height: 528px; position: relative;">                
            <canvas id="diagonal" style="border:0px none;top:0px;left:0;position:absolute; padding: 0px; opacity: 1;" width="750px" height="528px"></canvas>
            <img src="img/1.jpg" width="750px" usemap="#Map" style="border: 0px none;position:absolute;left:0;top:0;opacity:0;"/>
      
			<map id="Map" name="map">
				
				<area shape="poly" coords="287,45,  34,344, 200,450, 323,440"
				
				style="display:block;background-color:#000000;" href="position.html" />
			</map>
        </div>
    </div>
</body>
</html>

 

© 著作权归作者所有

疏影横斜

疏影横斜

粉丝 7
博文 14
码字总数 6250
作品 0
青岛
私信 提问
省市地区表 mysql数据库

CREATE TABLE ( INT(11) NOT NULL AUTO_INCREMENT COMMENT '编号', INT(11) NOT NULL DEFAULT '0' COMMENT '所属省份 0为省份', VARCHAR(50) NOT NULL COMMENT '地区名称', INT(11) NOT NULL......

太黑_thj
2016/12/27
249
0
java 省市区数据data 

java 省市区数据data CREATE TABLE hat_province ( sid number(11) NOT NULL , provinceID varchar2(6) default NULL, province varchar2(40) default NULL, PRIMARY KEY (sid) ); --市 CREA......

DemonsI
2018/12/28
19
0
中国省市县数据sql

MySQL-Front 5.1 (Build 2.7) /!40101 SET @OLDSQLMODE=@@SQL_MODE /;/!40101 SET SQL_MODE='' /;/!40111 SET @OLDSQLNOTES=@@SQL_NOTES /;/!40103 SET SQL_NOTES='ON' /; Host: localhost D......

crazymus
2013/12/17
663
1
[C++] 浮点数格式化输出

C++格式化输出浮点数 Displayed in default format: 0.00123457 1.946e+009 Displayed in scientific format: 1.234567e-003 1.946000e+009 Displayed in fixed format: 0.001235 194600000......

长平狐
2012/10/08
902
0
第二章——jXLS Area(区域)

1 介绍 Area是jXLS中的一个主要概念。本质上,Area代表Excel文件中需要转换的一个矩形区域。每个Area有一组与之关联的转换命令和一组嵌套子区域。每个子区域也是一个Area,有自己的一组命令和...

Leech
2018/07/11
694
0

没有更多内容

加载失败,请刷新页面

加载更多

webGL和three.js的关系

本文转载于:专业的前端网站➤webGL和three.js的关系 如今浏览器的功能越来越强大,而且这些功能可能通过JavaScript直接调用。你可以用HTML5标签轻松地添加音频和视频,而且可以在HTML5画布上...

前端老手
22分钟前
5
0
Spring如何实现AOP,请不要再说cglib了!

1. 从注解入手找到对应核心类 最近工作中我都是基于注解实现AOP功能,常用的开启AOP的注解是@EnableAspectJAutoProxy,我们就从它入手。 上面的动图的流程的步骤就是: @EnableAspectJAutoPr...

温安适
25分钟前
27
0
Mybatis之ParameterHandler

mybatis-3.4.6.release. ParementerHandler是个接口,如下List-1 List-1 public interface ParameterHandler { Object getParameterObject(); void setParameters(PreparedStateme......

克虏伯
39分钟前
6
0
Spark sql的批处理物理计划BatchScanExec

BatchScanExec是batch类的物理计划,对应的逻辑计划是DataSourceV2Relation,是Datasource。 它的入参是Scan类,Scan类有两个重要方法,一个获取分区列表信息;另一个方法获取读取器工厂。 ...

守望者之父
43分钟前
10
0
for循环与while循环

循环结构三要素 a. 初始值 b. 循环条件 c. 改变条件 for循环 声明格式 for(表达式1;表达式2;表达式3){ 循环体语句 } 表达式1:用来循环的变量初始值。(开始值) 表达式2:用来判断循环的条件。...

Lenat
49分钟前
12
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部