网站需要一张中国地图，并且鼠标经过某个省份，该省份的省份名字显示，而且该省份的地区会变色显示。
第一种方法：
将每个省份的图片定位（先隐藏），拼合成一张中国地图，然后再定位省份名称，鼠标经过省份名字，添加hover事件，将对应图片显示。
第二种方法：
使用图形插件echarts，轻松制作。
http://echarts.baidu.com/doc/example.html在echarts网站上下载文件包
echarts使用方法查看页面
http://echarts.baidu.com/doc/doc.html#%E5%BC%95%E5%85%A5ECharts3
可以在网站上调整好需要的样式再放到本地看效果
自己试验的demo如下：
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>echarts图形插件使用</title>
</head>
<body>
<div id="main" style="height:800px;"></div>
<script type="text/javascript" src="js/echarts-all.js"></script>
<script type="text/javascript">
var myChart = echarts.init(document.getElementById(\'main\'));
var option = {
series: [
{
name: \'Map\',
type: \'map\',
mapLocation: {
x: \'left\',
y: \'top\',
height: 500
},
selectedMode: \'multiple\',
itemStyle: {
normal: {
borderWidth: 2,
borderColor: \'lightgreen\',
color: \'orange\',
label: {
show: false
}
},
emphasis: { // 也是选中样式
borderWidth: 2,
borderColor: \'#fff\',
color: \'#32cd32\',
label: {
show: true,
textStyle: {
color: \'#fff\'
}
}
}
},
data: [
{
name: \'广东\',
value: Math.round(Math.random() * 1000),
itemStyle: {
normal: {
color: \'#32cd32\',
label: {
show: true,
textStyle: {
color: \'#fff\',
fontSize: 15
}
}
},
emphasis: { // 也是选中样式
borderWidth: 5,
borderColor: \'yellow\',
color: \'#cd5c5c\',
label: {
show: false,
textStyle: {
color: \'blue\'
}
}
}
}
}
],
markPoint: {
itemStyle: {
normal: {
color: \'skyblue\'
}
},
data: [
{
name: \'天津\',
value: 350
},
{
name: \'上海\',
value: 103
},
{
name: \'echarts\',
symbol: \'image://../asset/img/echarts-logo.png\',
symbolSize: 21,
x: 300,
y: 100
}
]
},
geoCoord: {
\'上海\': [121.4648, 31.2891],
\'天津\': [117.4219, 39.4189]
}
}
]
}
myChart.setOption(option);
</script>
</body>
</html>
效果图如下：