关于使用Html5 canvas、 map、jquery构造不规则变色点击区域热点区域

<!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构造不规则变色点击区域热点区域的更多相关文章

基于HTML5 Canvas和jQuery 的绘图工具的实现
简单介绍 HTML5 提供了强大的Canvas元素.使用Canvas并结合Javascript 能够实现一些很强大的功能.本文就介绍一下基于HTML5 Canvas 的绘图工具的实现.废话少说,先看成 ...
基于HTML5 Canvas的CSG构造实体几何书架
CSG 构造实体几何这个概念在工业水利水电施工上.游戏上已经有很多人使用了,最简单的实体表示叫作体元,通常是形状简单的物体,如立方体.圆柱体.棱柱.棱锥.球体.圆锥等.根据每个软件包的不同这些体元也有 ...
Html5的map在实际使用中遇到的问题及解决方案
前言:百度了一下html map,嗯嗯,介绍的挺详细的,如果是初学者,直接看他们的教程,挺好的,就不用我再多说了. 不过我发现一个问题,就是都是介绍map有什么属性怎么用的,这明显就是照搬文档自己再改 ...
HTML5+Canvas+jQuery调用手机拍照功能实现图片上传（二）
上一篇仅仅讲到前台操作,这篇专门涉及到Java后台处理.前台通过Ajax提交将Base64编码过的图片数据信息传到Java后台,然后Java这边进行接收处理.通过对图片数据信息进行Base64解码,之 ...
简介 jCanvas：当 jQuery遇上HTML5 Canvas
https://github.com/caleb531/jcanvas HTML5 可以直接在你的网页中使用 <canvas> 元素及其相关的 JavaScript API绘制的图形. 在 ...
HTML5 Canvas 实现的9个 Loading 效果
Sonic.js 是一个很小的 JavaScript 类,用于创建基于 HTML5 画布的加载图像.更强大的是 Sonic.js 还提供了基于现成的例子的创建工具,可以帮助你实现更多自定义的(Load ...
使用 HTML5 Canvas 绘制出惊艳的水滴效果
HTML5 在不久前正式成为推荐标准,标志着全新的 Web 时代已经来临.在众多 HTML5 特性中,Canvas 元素用于在网页上绘制图形,该元素标签强大之处在于可以直接在 HTML 上进行图形操作 ...
如何使用 HTML5 Canvas 制作水波纹效果
今天,我们继续分享 JavaScript 实现的效果例子,这篇文章会介绍使用 JavaScript 实现水波纹效果.水波效果以图片为背景,点击图片任意位置都会触发.有时候,我们使用普通的 Javasc ...
HTML5 Canvas 高仿逼真 3D 布料图案效果
HTML5 规范引进了很多新特性,其中最令人期待的之一就是 Canvas 元素,HTML5 Canvas 提供了通过 JavaScript 绘制图形的方法,非常强大.下面给大家分享一个 HTML5 C ...

随机推荐

textarea 的最大高度以及最小高度
<script type="text/javascript"> $(function(){ $("#textarea3").textareaAuto ...
ASP.NET 后台下载文件方法
void DownLoadFile(string fileName) { string filePath = Server.MapPath(fileName);//路径 //以字符流的形式下载文件 F ...
IE iframe 中 js 的 cookie 读写不到的解决办法
1.看这里(改服务器配置) http://www.cr173.com/html/16696_1.html 2.使用object模拟iframe,不使用iframe框架 <html> < ...
创建一个简单的配置android编译环境的脚本
由于有多个Android项目,每个项目配置编译环境时选项都不同,所以尝试写一个sh脚本来完成这个功能. 首先进入bin文件夹,新建一个文件enbuild $ cd ~/bin $ touch ...
Entity Framework Code First主外键关系映射约定
本篇随笔目录: 1.外键列名默认约定 2.一对多关系 3.一对一关系 4.多对多关系 5.一对多自反关系 6.多对多自反关系在关系数据库中,不同表之间往往不是全部都单独存在,而是相互存在关联的.两个 ...
C#获取QQ旋风的下载记录
/* * 用户:从前的我 * 日期:2015/8/26 */ using System; using System.IO; namespace GetXf { class Program { publ ...
css3属性：column分栏
css3选择器中提出了分栏的属性,其浏览器支持情况为:Internet Explorer 10 和 Opera 支持 column 属性,Firefox 支持替代的 -moz-column 属性,Sa ...
shell脚本练习(autocert)
#!/bin/bash#By Spinestars#20131118 #name:ca_cert#certficate ca cd /etc/pki/CA/auto num=$RANDOM mv ./ ...
FatMouse's Speed（HDU LIS）
FatMouse's Speed Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 65536/32768 K (Java/Others) ...
NOI十连测第五测 T1
#include<cstdio> #include<cstring> #include<cmath> #include<iostream> #inclu ...

关于使用Html5 canvas、 map、jquery构造不规则变色点击区域 热点区域

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

随机推荐

热门专题

关于使用Html5 canvas、 map、jquery构造不规则变色点击区域热点区域

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