<!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. RequireJs 深入理解

    原文   http://www.tuicool.com/articles/jam2Anv RequireJs已经流行很久了,我们在项目中也打算使用它.它提供了以下功能: 声明不同js文件之间的依赖 可 ...

  2. Cookie同域，跨域单点登录（转）

    Cookie 同域单点登录 最近在做一个单点登录的系统整合项目,之前我们使用控件实现单点登录(以后可以介绍一下).但现在为了满足客户需求,在不使用控件情况下实现单点登录,先来介绍一下单点登录. 单点登 ...

  3. SSH连接LINUX乱码解决方法

    1.vi /etc/sysconfig/i18n 将内容改为 LANG="zh_CN.GB18030" LANGUAGE="zh_CN.GB18030:zh_CN.GB2 ...

  4. Ubuntu14.04配置arm-linux-gcc 4.4.3交叉编译环境

    首先下载交叉编译:不多说,直接贴地址了 http://arm9download.cncncn.com/mini2440/linux/arm-linux-gcc-4.4.3-20100728.tar.g ...

  5. python调用ice接口

    今天用python调用ice接口,遇到如下提示 ImportError: No module named Ice 解决方案是 set PYTHONPATH=C:\Program Files\ZeroC ...

  6. 用ant重新编译jdk加入调试信息

    (文章后面提供了ant和build.xml打包之后的build.zip下载,解压build.zip,然后将apache-ant-1.9.2-bin.zip解压即完成了ant安装,也可到http://a ...

  7. Mysql MEMORY 引擎

    CREATE TABLE `m` ( `) unsigned NOT NULL AUTO_INCREMENT, `name` ) NOT NULL, `ctime` ) NOT NULL, `ltim ...

  8. 50个必备的实用jQuery代码段+ 可以直接拿来用的15个jQuery代码片段

    50个必备的实用jQuery代码段+ 可以直接拿来用的15个jQuery代码片段 本文会给你们展示50个jquery代码片段,这些代码能够给你的javascript项目提供帮助.其中的一些代码段是从j ...

  9. Roads in the North（POJ 2631 DFS）

    Description Building and maintaining roads among communities in the far North is an expensive busine ...

  10. 线段树（updata+query）

    I Hate It Time Limit: 9000/3000 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/Others)Total S ...