132 lines
9.7 KiB
HTML
132 lines
9.7 KiB
HTML
<html>
|
||
<head>
|
||
<meta charset="utf-8">
|
||
<title>无标题文档</title>
|
||
</head>
|
||
<body>
|
||
<div>
|
||
<div style="display: block; background: url('area_hc.png') repeat scroll 0% 0% transparent; padding: 0px; width: 241px; height: 287px; position: relative;">
|
||
<canvas id="diagonal" style="border:0px none;top:0px;left:0;position:absolute; padding: 0px; opacity: 1;"
|
||
width="241px" height="287px"></canvas>
|
||
<img src="area_hc.png" usemap="#Map" style="border: 0px none;position:absolute;left:0;top:0;opacity:0;">
|
||
<map name="Map" id="center_map">
|
||
<area id="street_df" shape="poly"
|
||
coords="73,2,76,5,79,6,81,10,84,13,86,20,84,26,82,28,82,33,83,37,82,44,81,51,81,58,84,66,88,72,90,79,94,84,95,88,100,89,105,88,111,88,117,94,119,98,123,102,128,107,130,112,129,116,129,118,127,118,122,118,121,116,119,114,118,115,117,117,115,118,112,118,108,118,106,116,106,116,103,117,104,121,106,125,102,126,99,126,98,126,95,129,95,136,97,139,101,139,105,139,107,141,108,141,114,139,117,137,119,136,123,141,125,146,132,149,136,146,131,150,124,154,123,158,120,161,113,166,115,172,115,177,115,184,117,189,118,196,118,198,108,199,101,201,96,201,93,200,88,196,82,190,81,186,80,185,75,183,72,183,69,176,65,172,62,170,61,166,59,162,54,158,46,156,38,154,33,150,31,141,32,135,31,130,29,123,30,119,32,115,35,111,35,108,35,104,32,98,29,94,25,93,20,91,13,88,11,83,5,77,3,74,3,70,5,66,10,62,9,54,8,45,10,41,13,39,16,39,21,39,26,39,34,39,39,39,41,39,43,39,48,34,51,25,54,19,59,16,63,13,63,10,70,8,72,5"
|
||
href="street_df.png">
|
||
<area id="street_xy" shape="poly"
|
||
coords="136,145,141,146,145,146,150,148,155,148,163,146,173,147,179,149,184,151,188,159,189,162,191,169,191,173,190,179,189,181,186,185,185,189,182,191,180,193,176,193,174,189,170,190,167,190,165,192,163,194,160,197,156,197,148,197,140,197,131,197,123,197,117,196,118,192,118,186,117,181,117,175,119,167,119,165,120,163,123,161,132,155,129,153,133,149,126,155,124,158"
|
||
href="street_xy.png">
|
||
<area id="street_sy" shape="poly"
|
||
coords="166,200,167,202,175,206,176,211,170,205,176,208,180,211,182,214,184,221,186,223,187,230,187,236,187,244,187,251,187,259,184,263,181,266,176,266,173,266,169,266,167,263,162,266,162,273,159,277,164,279,169,279,174,281,183,283,193,283,197,283,203,283,205,280,205,275,205,269,201,263,199,253,196,246,196,240,196,235,199,229,203,226,207,221,214,216,221,206,226,202,233,198,237,195,239,191,238,187,235,185,235,186,233,185,234,187,234,184,231,184,228,182,225,181,225,174,230,174,226,171,229,174,226,171,223,170,222,167,220,163,217,160,215,156,212,154,208,156,208,158,204,159,204,158,200,158,196,156,195,154,191,156,190,153,190,153,189,154,194,158,196,155,189,160,191,167,191,172,193,175,193,179,192,182,190,185,188,190,187,192,184,193,182,193,178,193,176,192,172,191,171,191,169,191,166,193,165,196,162,197,165,198,165,199"
|
||
href="street_sy.png">
|
||
<area id="street_hc" shape="poly"
|
||
coords="97,203,100,204,104,203,106,202,111,201,117,201,123,199,129,198,140,198,151,198,156,199,161,200,164,203,168,206,171,211,174,216,178,220,181,227,181,233,182,239,184,244,184,251,184,256,181,258,178,259,171,259,169,260,165,261,160,266,155,273,151,274,147,273,143,272,137,271,129,271,123,270,116,268,110,266,104,264,101,263,97,260,93,257,92,253,90,250,90,245,92,242,95,237,95,232,99,224,101,216,100,211,99,207"
|
||
href="street_hc.png">
|
||
</map>
|
||
</div>
|
||
</div>
|
||
</body>
|
||
<script src="http://libs.baidu.com/jquery/1.9.1/jquery.min.js" type="text/javascript"></script>
|
||
<script type="text/javascript">
|
||
var street_df_coords = '73,2,76,5,79,6,81,10,84,13,86,20,84,26,82,28,82,33,83,37,82,44,81,51,81,58,84,66,88,72,90,79,94,84,95,88,100,89,105,88,111,88,117,94,119,98,123,102,128,107,130,112,129,116,129,118,127,118,122,118,121,116,119,114,118,115,117,117,115,118,112,118,108,118,106,116,106,116,103,117,104,121,106,125,102,126,99,126,98,126,95,129,95,136,97,139,101,139,105,139,107,141,108,141,114,139,117,137,119,136,123,141,125,146,132,149,136,146,131,150,124,154,123,158,120,161,113,166,115,172,115,177,115,184,117,189,118,196,118,198,108,199,101,201,96,201,93,200,88,196,82,190,81,186,80,185,75,183,72,183,69,176,65,172,62,170,61,166,59,162,54,158,46,156,38,154,33,150,31,141,32,135,31,130,29,123,30,119,32,115,35,111,35,108,35,104,32,98,29,94,25,93,20,91,13,88,11,83,5,77,3,74,3,70,5,66,10,62,9,54,8,45,10,41,13,39,16,39,21,39,26,39,34,39,39,39,41,39,43,39,48,34,51,25,54,19,59,16,63,13,63,10,70,8,72,5';
|
||
var street_xy_coords = '136,145,141,146,145,146,150,148,155,148,163,146,173,147,179,149,184,151,188,159,189,162,191,169,191,173,190,179,189,181,186,185,185,189,182,191,180,193,176,193,174,189,170,190,167,190,165,192,163,194,160,197,156,197,148,197,140,197,131,197,123,197,117,196,118,192,118,186,117,181,117,175,119,167,119,165,120,163,123,161,132,155,129,153,133,149,126,155,124,158';
|
||
var street_sy_coords = '166,200,167,202,175,206,176,211,170,205,176,208,180,211,182,214,184,221,186,223,187,230,187,236,187,244,187,251,187,259,184,263,181,266,176,266,173,266,169,266,167,263,162,266,162,273,159,277,164,279,169,279,174,281,183,283,193,283,197,283,203,283,205,280,205,275,205,269,201,263,199,253,196,246,196,240,196,235,199,229,203,226,207,221,214,216,221,206,226,202,233,198,237,195,239,191,238,187,235,185,235,186,233,185,234,187,234,184,231,184,228,182,225,181,225,174,230,174,226,171,229,174,226,171,223,170,222,167,220,163,217,160,215,156,212,154,208,156,208,158,204,159,204,158,200,158,196,156,195,154,191,156,190,153,190,153,189,154,194,158,196,155,189,160,191,167,191,172,193,175,193,179,192,182,190,185,188,190,187,192,184,193,182,193,178,193,176,192,172,191,171,191,169,191,166,193,165,196,162,197,165,198,165,199';
|
||
var street_hc_coords = '97,203,100,204,104,203,106,202,111,201,117,201,123,199,129,198,140,198,151,198,156,199,161,200,164,203,168,206,171,211,174,216,178,220,181,227,181,233,182,239,184,244,184,251,184,256,181,258,178,259,171,259,169,260,165,261,160,266,155,273,151,274,147,273,143,272,137,271,129,271,123,270,116,268,110,266,104,264,101,263,97,260,93,257,92,253,90,250,90,245,92,242,95,237,95,232,99,224,101,216,100,211,99,207';
|
||
$(function () {
|
||
$(window).resize(function (event) {
|
||
var coords = new Array();
|
||
coords.push(street_df_coords);
|
||
coords.push(street_xy_coords);
|
||
coords.push(street_sy_coords);
|
||
coords.push(street_hc_coords);
|
||
resizeMap(coords, '241', '287');
|
||
changeStyle();
|
||
});
|
||
changeStyle();
|
||
});
|
||
|
||
//热区图坐标计算，这里需要注意的是宽和高是原图片的宽和高
|
||
function resizeMap(o_coords, imageWidth, imageHeigth) {
|
||
var map = document.getElementById("center_map");
|
||
var element = map.childNodes;
|
||
for (var i = 0; i < element.length; i++) {
|
||
var oldCoords = o_coords[i];
|
||
var newcoords = residePointPosition(oldCoords, imageWidth, imageHeigth);
|
||
element[i].setAttribute("coords", newcoords);
|
||
}
|
||
var test = element;
|
||
}
|
||
|
||
//调整MAP中坐标
|
||
function residePointPosition(position, _imageWidth, _imageHeigth) {
|
||
var imageWidth = _imageWidth;//213;
|
||
var imageHeigth = _imageHeigth;//242;
|
||
var cur_imageHeight = $('#center_img').height();
|
||
//var cur_imageWidth = $('#center_img').width();
|
||
var cur_imageWidth = Math.round(parseInt((_imageWidth * cur_imageHeight) / imageHeigth));
|
||
var each = position.split(",");
|
||
//获取每个坐标点
|
||
for (var i = 0; i < each.length; i++) {
|
||
each[i] = Math.round(parseInt(each[i]) * cur_imageWidth / imageWidth);//x坐标
|
||
i++;
|
||
each[i] = Math.round(parseInt(each[i]) * cur_imageHeight / imageHeigth);//y坐标
|
||
}
|
||
//生成新的坐标点
|
||
var newPosition = "";
|
||
for (var i = 0; i < each.length; i++) {
|
||
newPosition += each[i];
|
||
if (i < each.length - 1) {
|
||
newPosition += ",";
|
||
}
|
||
}
|
||
return newPosition;
|
||
}
|
||
|
||
function changeStyle() {
|
||
// 热区鼠标滑过变色以及显示title
|
||
var canvers = document.getElementById("diagonal");
|
||
var context = canvers.getContext("2d");
|
||
context.globalAlpha = 0.5;
|
||
$("#center_map area").each(function () {
|
||
$(this).mouseover(function () {
|
||
context.beginPath();
|
||
var strs = new Array(); //定义一数组
|
||
strs = $(this).attr("coords").split(",");
|
||
var i1, i2;
|
||
var x = 0;
|
||
var y = 0;
|
||
for (var i = 0; i < strs.length; i++) {
|
||
if (i % 2 == 0) {
|
||
i1 = strs[i];
|
||
x = x + parseInt(i1);
|
||
}
|
||
if (i % 2 == 1) {
|
||
i2 = strs[i];
|
||
if (i == 1) {
|
||
context.moveTo(i1, i2);
|
||
} else {
|
||
context.lineTo(i1, i2);
|
||
}
|
||
y = y + parseInt(i2);
|
||
}
|
||
}
|
||
context.fillStyle = "#fff";
|
||
// 这里计算不规则图形的中心点
|
||
x = parseInt(x * 2 / strs.length) - 20;//由于title的名字长度关心，故将点横坐标向左偏移20，这样子，title显示的会更加协调
|
||
y = parseInt(y * 2 / strs.length);
|
||
// console.log(x + ',' + y);
|
||
var _text = $(this).attr('id');
|
||
context.fillText(_text, x, y);
|
||
context.fill();
|
||
|
||
|
||
context.closePath(); //闭合
|
||
});
|
||
$(this).mouseout(function () {
|
||
context.clearRect(0, 0, 241, 287);
|
||
});
|
||
});
|
||
}
|
||
</script>
|
||
</html>
|