Newer
Older
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<<<<<<< HEAD
<title>监区平面图</title>
<script src="../static/js/flexible.js"></script>
<link rel="stylesheet" href="../static/css/common.css">
=======
<script src="static/js/jquery-1.8.1.min.js" type=text/javascript></script>
<script src="static/js/flexible.js"></script>
<link rel="stylesheet" type="text/css" href="static/css/common.css" />
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
/* 鼠标悬停时显示的tooltip样式 */
.tooltip {
position: absolute;
background-color: #333;
color: #fff;
padding: 5px;
border-radius: 5px;
display: none;
/* 初始时隐藏 */
}
</style>
<script type="text/javascript">
$(function () {
})
function handleClick(areaNumber) {
// 根据不同的区域执行不同的操作
switch (areaNumber) {
case 1:
alert('点击了区域 1');
// 执行区域 1 的操作
break;
case 2:
alert('点击了区域 2');
// 执行区域 2 的操作
break;
// 添加更多的 case 语句处理其他区域
}
}
function showTooltip(event, content) {
// 获取tooltip元素
var tooltip = document.getElementById('tooltip');
// 设置tooltip的内容
tooltip.innerHTML = content;
// 设置tooltip的位置
tooltip.style.left = event.pageX + 'px';
tooltip.style.top = event.pageY + 'px';
// 显示tooltip
tooltip.style.display = 'block';
}
function hideTooltip() {
// 隐藏tooltip
var tooltip = document.getElementById('tooltip');
tooltip.style.display = 'none';
}
</script>
>>>>>>> a58bbc28b511c367a82c847858c8470172463762
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
<div class="container">
<div class="main-area">
<div class="header-area">
<img src="../static/images/logo_mc.png"/>
</div>
<div class="area-content">
<div class="loupan_map_box">
<ul>
<li class="index">
<a href="#"> <img src="./static/images/model_mc.png"/></a>
</li>
<li class="index_01">
<a href="#"> <img src="./static/images/model_mc.png"/></a>
</li>
<li class="index_02">
<a href="#"> <img src="./static/images/model_mc.png"/></a>
</li>
<li class="index_03">
<a href="#"> <img src="./static/images/model_mc.png"/></a>
</li>
<li class="index_04">
<a href="#"> <img src="./static/images/model_mc.png"/></a>
</li>
<li class="index_05">
<a href="#"> <img src="./static/images/model_mc.png"/></a>
</li>
<li class="index_06">
<a href="#"> <img src="./static/images/model_mc.png"/></a>
</li>
<li class="index_07">
<a href="#"> <img src="./static/images/model_mc.png"/></a>
</li>
</ul>
</div>
</div>
<<<<<<< HEAD
=======
<img src="static/images/index1.png" usemap="#image-map">
<map name="image-map">
<area target="" alt="jianzu1" title="jianzu1" href="" coords="588,579,633,641"
onclick="handleClick(1)" shape="rect">
<area target="" alt="jianzu2" title="jianzu2" href="" coords="667,565,708,620" onclick="handleClick(2)"
shape="rect">
<area target="" alt="jianzu3" title="jianzu3" href="" coords="708,687,669,641" shape="rect">
<area target="" alt="jianzu4" title="jianzu4" href="" coords="732,638,776,683" shape="rect">
<area target="" alt="jianzu5" title="jianzu5" href="" coords="758,564,803,618" shape="rect">
<area target="" alt="jianzu6" title="jianzu6" href="" coords="820,452,857,501" shape="rect">
<area target="" alt="jianzu7" title="jianzu7" href="" coords="834,536,869,587" shape="rect">
<area target="" alt="jianzu8" title="jianzu8" href="" coords="981,518,1015,564" shape="rect">
<area target="" alt="jianzu9" title="jianzu9" href="" coords="1066,644,1103,696" shape="rect">
<area target="" alt="jianzu10" title="jianzu10" href="" coords="1129,639,1171,686" shape="rect">
<area target="" alt="jianzu11" title="jianzu11" href="" coords="1241,662,1283,705" shape="rect">
</map>
>>>>>>> a58bbc28b511c367a82c847858c8470172463762