关于使用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 ...

随机推荐

boost 定时器.
#include <iostream> #include <boost/asio.hpp> int main() { boost::asio::io_service io; b ...
关于 linux ssh 的配置.
一.禁止root用户远程登录: # cd /etc/ssh # vi sshd_config 将 permitRootLogin 后面的值改成 no 如下图: 然后再重启sshd服务即可,如下: # ...
关于IIS7.5下的web.config 404 配置的一些问题
本文介绍一个关于IIS环境下web.config配置的经验问题.在IIS7.5中添加配置404页面时遇到了一些问题,记录如下: 一开始在<customError>下的<error&g ...
C#中静态类、静态方法和静态变量的简单说明
静态方法与静态变量一样,属于类本身,而不属于哪个类的一个对象.调用一个被定义为static的方法,只有通过在它前面加上这个类的名称.一般定义里说是可以通过实例调用的.其他语言我还没测试,但是在C#中是 ...
Performing Post-Build Event之类的编译错误
如果编译出现Perror PRJ0019: A tool returned an error code from "Performing Post-Build Event..."之 ...
jquery的使用超级快速入门熟练使用
如何使用jquery,首先需要引入jquery的js库文件,可以是免费的cdn资源,也可以是本地下载的资源使用方法:$(function(){ 这里面写你要执行的代 ...
Hibernate中HQL的日期差值计算，可计算相差多少秒
最近有个业务需求就是计算订单创建时间离现在超过 4 小时的订单都查找出来! 那么就需要用到日期函数了. 网上找了一下总共的日期函数有一下几个: CURRENT_DATE() 返回数据库当前日期时间函 ...
DotNetNuke-DNN Module模块引用自定义CSS或者JS文件
当新增一个module时,有时会引用自定义的或者第三方CSS.JS文件. 1.添加自定义的CSS时,可以直接在module的根目录下添加module.css,然后框架会自动加载此CSS: 2.这个比较 ...
使用meta来控制浏览器的渲染方式
<meta name="renderer" content="webkit"> ...
information_schema.character_sets 学习
information_schema.character_sets 表用于查看字符集的详细信息 1.character_sets 常用列说明: 1.character_set_name: 字符集名 2 ...

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

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

随机推荐

热门专题

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

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