<!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>

    <title></title>

    <script src="JS/jquery-1.4.1.min.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 = new Array(); //定义一数组

                    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 = "#C0C0C0";

                    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('Images/map.png') 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="data:images/map.png" width="750px" usemap="#Map" style="border: 0px none;position:absolute;left:0;top:0;opacity:0;"/>

            <map id="Map" name="Map">

                <area alt="北部区域" href="#" data_ID="1" coords="564,222,552,229,545,243,545,248,523,249,518,240,521,238,523,235,525,227,522,224,521,207,526,207,526,200,523,194,524,189,520,185,486,147,486,144,483,142,484,134,488,130,493,130,497,132,507,132,518,122,527,121,535,116,538,111,541,109,546,109,551,103,556,104,564,101,569,104,575,104,575,97,570,92,566,92,561,86,553,86,549,89,533,90,531,92,527,90,528,80,530,72,535,61,540,61,541,63,548,63,552,59,556,59,565,54,565,51,562,48,564,46,565,42,569,38,570,31,575,21,576,13,572,10,582,2,596,6,605,7,608,9,612,13,612,15,620,22,627,20,633,18,637,23,645,33,649,34,649,41,652,44,653,51,655,53,662,52,670,51,677,52,681,56,684,56,688,62,692,64,694,71,704,71,707,68,711,68,722,59,736,54,736,67,733,73,733,87,730,106,720,105,713,106,710,110,709,116,714,121,716,137,714,139,711,141,709,145,706,145,704,141,700,142,700,150,697,152,695,155,685,157,685,161,688,163,687,167,673,167,670,162,667,163,666,165,665,170,659,179,652,182,647,189,645,192,639,194,635,197,624,201,616,209,608,210,608,208,611,206,610,198,615,195,611,181,603,182,597,188,595,193,589,196,582,197,581,202,580,207,579,209,563,209,562,212,561,217" shape="poly">

                <area alt="东部区域" href="#" data_ID="2" coords="582,424,584,417,566,411,566,415,547,414,544,416,542,412,546,407,535,403,535,393,532,384,527,377,529,369,533,363,532,351,538,345,547,344,550,339,561,338,561,331,558,329,558,320,551,319,551,316,556,307,557,304,554,299,549,299,543,292,550,283,553,277,560,280,563,277,563,272,559,272,560,270,561,264,565,266,570,266,582,268,585,270,589,270,590,268,598,273,608,278,612,289,606,294,607,298,611,300,620,300,632,309,621,310,611,307,628,316,623,322,627,324,623,329,612,332,631,333,637,337,631,343,637,344,631,347,633,352,633,355,637,360,626,359,626,367,622,369,621,374,617,377,619,381,614,385,608,381,614,389,610,402,604,411,596,409,596,414,589,414,590,422" shape="poly">

                <area alt="西部区域" href="#" data_ID="3" coords="17,147,21,144,19,136,26,135,32,126,39,126,40,122,43,125,49,125,50,129,54,132,62,128,73,125,84,120,98,120,108,120,114,111,124,103,122,97,123,87,120,79,131,79,139,83,144,80,150,84,152,75,166,60,172,64,181,66,191,69,195,57,201,49,208,50,217,42,225,43,225,52,243,69,251,79,253,86,245,100,248,108,263,111,275,114,285,123,294,127,295,133,303,148,316,151,328,152,335,155,348,156,359,157,391,171,400,171,404,174,423,167,437,162,448,165,458,163,468,162,487,147,519,186,510,190,506,193,500,192,497,196,487,200,485,204,478,202,473,205,469,205,456,221,456,225,450,228,442,225,438,225,435,224,429,233,439,242,444,242,456,246,451,251,453,256,446,258,441,262,437,266,429,265,423,269,422,283,420,286,415,287,414,293,420,297,429,296,436,303,444,303,447,306,454,304,459,308,466,312,476,322,472,330,462,328,455,332,458,336,459,343,467,348,464,354,461,358,464,353,458,366,451,358,452,353,446,353,440,349,435,352,427,352,421,358,417,356,413,360,420,367,415,371,407,370,405,370,405,367,402,365,399,366,395,363,390,367,388,358,381,356,379,361,375,365,375,371,368,375,367,392,360,391,356,393,347,383,346,377,337,369,336,363,329,361,322,350,319,352,317,356,315,352,314,347,308,345,307,351,300,358,296,358,295,353,289,354,287,361,281,360,271,353,265,351,247,359,240,358,236,362,235,363,235,366,228,368,222,364,217,362,210,362,209,355,204,352,203,346,193,346,184,339,180,338,170,343,170,350,166,350,163,346,163,344,166,339,165,338,159,337,159,340,156,340,155,338,141,338,137,331,134,331,134,334,130,334,130,330,128,330,127,332,124,332,123,328,120,325,117,324,117,322,115,322,115,319,116,318,110,317,108,312,103,306,100,306,97,308,94,307,108,312,103,306,100,306,97,308,94,306,95,303,84,292,83,288,77,284,73,283,70,288,67,288,58,275,55,276,54,271,47,266,43,263,44,259,45,252,43,250,42,248,43,244,47,241,48,246,53,246,56,241,54,232,54,225,61,222,56,217,54,210,54,201,46,202,41,197,32,190,32,184,35,181,19,170,27,162,27,155,30,151,27,149,25,146,18,146" shape="poly">

                <area alt="南部区域" href="#" data_ID="4" coords="532,351,529,343,525,343,521,345,518,344,515,339,511,340,509,340,504,335,500,336,496,339,493,339,492,337,487,337,481,343,479,342,473,342,467,348,464,354,461,358,464,353,458,366,451,358,452,353,446,353,440,349,435,352,427,352,421,358,417,356,413,360,420,367,415,371,407,370,405,370,405,367,402,365,399,366,395,363,390,367,388,358,381,356,379,361,375,365,375,371,368,375,367,392,360,391,356,393,347,383,346,377,337,369,336,363,329,361,322,350,319,352,317,356,315,352,314,347,308,345,307,351,300,358,296,358,296,362,301,362,304,366,304,381,301,384,301,388,284,404,285,410,283,415,290,411,299,411,299,424,301,427,309,427,303,437,303,441,312,442,319,452,326,452,327,449,333,449,333,458,343,458,343,449,342,441,352,441,355,437,358,440,364,440,368,438,378,441,378,437,387,438,395,432,408,438,420,438,419,443,416,449,437,458,444,458,448,455,454,458,460,458,467,459,465,469,468,472,469,475,461,479,458,482,448,488,449,496,462,503,479,496,479,488,484,480,477,475,477,471,473,466,488,459,496,458,499,454,504,455,504,452,514,452,514,450,523,450,522,439,529,447,536,447,540,441,544,444,546,441,552,438,568,436,582,424,584,417,566,411,566,415,547,414,544,416,542,412,546,407,535,403,535,393,532,384,527,377,529,369,533,363" shape="poly">

                <area alt="中部区域" href="#" data_ID="5" coords="519,186,510,190,506,193,500,192,497,196,487,200,485,204,478,202,473,205,469,205,456,221,456,225,450,228,442,225,438,225,435,224,429,233,439,242,444,242,456,246,451,251,453,256,446,258,441,262,437,266,429,265,423,269,422,283,420,286,415,287,414,293,420,297,429,296,436,303,444,303,447,306,454,304,459,308,466,312,476,322,472,330,462,328,455,332,458,336,459,343,467,348,473,342,479,342,481,343,487,337,492,337,493,339,496,339,500,336,504,335,509,340,511,340,515,339,518,344,521,345,525,343,529,343,532,351,538,345,547,344,550,339,561,338,561,331,558,329,558,320,551,319,551,316,556,307,557,304,554,299,549,299,543,292,550,283,553,277,560,280,563,277,563,272,559,272,560,270,561,264,565,266,570,266,582,268,585,270,589,270,590,268,591,262,606,247,619,236,628,235,629,230,621,230,617,231,613,229,600,228,592,238,585,238,581,234,582,225,573,225,565,226,564,222,552,229,545,243,545,248,523,249,518,240,521,238,523,235,525,227,522,224,521,207,526,207,526,200,523,194,524,189,520,185" shape="poly">

            </map>

        </div>

    </div>

</body>

</html>

关于使用Html5 canvas、 map、jquery构造不规则变色点击区域 热点区域的更多相关文章

  1. 基于HTML5 Canvas和jQuery 的绘图工具的实现

    简单介绍 HTML5 提供了强大的Canvas元素.使用Canvas并结合Javascript 能够实现一些很强大的功能.本文就介绍一下基于HTML5 Canvas 的绘图工具的实现.废话少说,先看成 ...

  2. 基于HTML5 Canvas的CSG构造实体几何书架

    CSG 构造实体几何这个概念在工业水利水电施工上.游戏上已经有很多人使用了,最简单的实体表示叫作体元,通常是形状简单的物体,如立方体.圆柱体.棱柱.棱锥.球体.圆锥等.根据每个软件包的不同这些体元也有 ...

  3. Html5的map在实际使用中遇到的问题及解决方案

    前言:百度了一下html map,嗯嗯,介绍的挺详细的,如果是初学者,直接看他们的教程,挺好的,就不用我再多说了. 不过我发现一个问题,就是都是介绍map有什么属性怎么用的,这明显就是照搬文档自己再改 ...

  4. HTML5+Canvas+jQuery调用手机拍照功能实现图片上传（二）

    上一篇仅仅讲到前台操作,这篇专门涉及到Java后台处理.前台通过Ajax提交将Base64编码过的图片数据信息传到Java后台,然后Java这边进行接收处理.通过对图片数据信息进行Base64解码,之 ...

  5. 简介 jCanvas：当 jQuery遇上HTML5 Canvas

    https://github.com/caleb531/jcanvas HTML5 可以直接在你的网页中使用 <canvas> 元素及其相关的 JavaScript API绘制的图形. 在 ...

  6. HTML5 Canvas 实现的9个 Loading 效果

    Sonic.js 是一个很小的 JavaScript 类,用于创建基于 HTML5 画布的加载图像.更强大的是 Sonic.js 还提供了基于现成的例子的创建工具,可以帮助你实现更多自定义的(Load ...

  7. 使用 HTML5 Canvas 绘制出惊艳的水滴效果

    HTML5 在不久前正式成为推荐标准,标志着全新的 Web 时代已经来临.在众多 HTML5 特性中,Canvas 元素用于在网页上绘制图形,该元素标签强大之处在于可以直接在 HTML 上进行图形操作 ...

  8. 如何使用 HTML5 Canvas 制作水波纹效果

    今天,我们继续分享 JavaScript 实现的效果例子,这篇文章会介绍使用 JavaScript 实现水波纹效果.水波效果以图片为背景,点击图片任意位置都会触发.有时候,我们使用普通的 Javasc ...

  9. HTML5 Canvas 高仿逼真 3D 布料图案效果

    HTML5 规范引进了很多新特性,其中最令人期待的之一就是 Canvas 元素,HTML5 Canvas 提供了通过 JavaScript 绘制图形的方法,非常强大.下面给大家分享一个 HTML5 C ...

随机推荐

  1. asp.net mvc 访问.html文件

    把html页面放在除Views文件夹外的任意文件夹,如Htmls--123.html,url直接访问便可,如 http://yourname/htmls/123.html 可以在路由表中排出不需要路由 ...

  2. Comparator和Comparable在排序中的应用

    http://blog.csdn.net/iisgirl/article/details/7269833

  3. jquery动态删除、复制、包裹DOM节点

    1.remove()方法 移除满足条件的元素 <html> <head> <meta http-equiv="Content-Type" conten ...

  4. 求a，b在区间上的公倍数个数

    给你两个数 a,b.问你区间 [1,N]中都是有多少个数是a,b的公倍数.当数据很大的时候,遍历肯定会超时.其实,我们可以首先求出 lcm(a,b).因为我们知道(a,b)公倍数都是它最小公倍数的倍数 ...

  5. 利用反射动态构成sql语句

    class Program     {         static void Main(string[] args)         {             People p = new Peo ...

  6. Excel Aspose.Cells 设置单元格格式 为数字

    Workbook workbook = new Workbook(); //工作簿 Worksheet sheet = workbook.Worksheets[]; //工作表 sheet.Cells ...

  7. 字符串分割与数组的分割 split()VSsplice()&slice()

    一.作用对象 1.split()方法是对字符串的操作:splice()和slice()是对数组的操作.slice()也可用于字符串. 二.参数 1.split(separator,howmany) 参 ...

  8. PyQuery查询html信息

    以下代码主要演示使用pyquery进行对html文件的解析,包括设定编码,对子块进行查询等操作: from pyquery import PyQuery as pq import os from lx ...

  9. javascript统计输入文本的简易方法

    计算文本框的输入字符数的简易方法: ]; var tValue = text.value; num = Math.ceil(getLength(tValue)/); //正则:用于区分中文为两个字节 ...

  10. Linux下，连接器ld链接顺序的总结

    原来ld对于链接一系列的库的顺序是很敏感的,不然会报undefined referenced 的函数符号错误,意思就是未找到函数定义.实际上库是能正确打开的.如果库libA.a依赖于库libB.a,那 ...