<!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. Flashback Query(函数示例）

    Flashback Query 函数,存储过程,包,触发器等对象Flashback Drop 可以闪回与表相关联的对象, 如果是其他的对象,比如function,procedure,trigger等. ...

  2. 如何排版 微信公众号「代码块」之 MarkEditor

    前段时间写过一篇文章 如何排版微信公众号「代码块」,讲的是如何使用浏览器插件 Markdown Here 来排版代码块.虽然用 Markdown Here 排版出来的样式还不错,但存在一个问题,就是代 ...

  3. BackgroundWorker 后台进程控制窗体label、richtextbook内容刷新

    昨天写了一个从文章中提取关键词的程序,写完处理的逻辑后又花了好几个小时在用户友好性上.加了几个progressBar,有显示总进度的.有显示分布进度的..因为程序要跑好几个小时才能执行好,只加个总进度 ...

  4. 调用[[UIDevice currentDevice] userInterfaceIdiom]==UIUserInterfaceIdiomPad判断设备

    将模拟器改为Ipad时,调用[[UIDevice currentDevice] userInterfaceIdiom]==UIUserInterfaceIdiomPad判断设备是否为Ipad,但程序并 ...

  5. 1008 Gnome Tetravex

    练习使用DPS的题,不知道有无别的做法,思路不复杂.形式是统计并且进行数字配对. #include <stdio.h> ][],note[],ans[]; void ini(){ int ...

  6. Java Spring MVC

    Spring MVC的实现包括 实现Controller类和基于注解的Controller RequstMapping方式 依赖: <!-- https://mvnrepository.com/ ...

  7. C++之------构造函数

    创建一个对象时,常常需要作某些初始化的工作,例如对数据成员赋初值. 类的数据成员是不能在声明类时初始化的. class Time { public : //声明为公用成员 hour; minute; ...

  8. Improving the AbiWord's Piece Table

    Improving the AbiWord's Piece Table[转] One of the most critical parts of any word processor is the b ...

  9. Effective Java单元测试TestNG - 就是爱Java

    TestNG是另一种单元测试的framework,与JUnit的类似,这次Mix将使用它来撰写测试程序,大部分所引用的class package都一样,只差在JUnit与TestNG的字样,可以直接用 ...

  10. c3p0链接池

    频繁的链接数据库是非常消耗性能的,所以就采用了将一定量的链接保存在一个池中,这个池我们叫做链接池. 详细请看:http://baike.baidu.com/link?url=dlTW-fTS3N_-j ...