最近，在网站的项目中，客户提出了一个交互效果，查看源码，使用了<map>与<area>标签，第一次使用，特在此标记一下。
一、实例相关情况介绍
参考的实例效果如下所示：
首先，展示的是四位人物的图片，当鼠标移入到其中一个人物上时，会出现相应的人物的简介，而其他的几个人物会隐藏起来（有阴影遮罩的感觉）。
①使用<map>标签形成带有可点击区域的图像映射；②<area>标签定义图像映射中的区域（注：图像映射指得是带有可点击区域的图像），与<map>配合使用，用于定位图像中可点击的区域范围；③鼠标点击事件，使用mouseover事件；④其他人物隐藏时，使用hover事件进行display:block与display:none进行切换；⑤其他人物隐藏时，人物的背景遮罩效果，使用fade{filter};
二、运用的实例代码
<!DOCTYPE html>
<html>
<head>
<style>
.fade1 {
filter:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg'><filter id='bright30'><feComponentTransfer><feFuncRtype='linear' slope='0.30'/><feFuncG type='linear' slope='0.30'/><feFuncB type='linear' slope='0.30'/></feComponentTransfer></filter></svg>#bright30");
filter:brightness(0.3) blur(9px) opacity(0.4);
-webkit-filter: brightness(0.3) blur(9px) opacity(0.4);
-moz-filter:brightness(0.3) blur(9px) opacity(0.4);
-o-filter:brightness(0.3) blur(9px) opacity(0.4);
-ms-filter:brightness(0.3) blur(9px) opacity(0.4);
filter:progid:DXImageTransform.Microsoft.Blur(PixelRadius=2, MakeShadow=false);
}
.int-tea-content{
margin:0 auto;
}
.int-tea-content .intro-im{
width: 300px;
height:348px;
display:none;
line-height:1.5;
padding-top:60px;
}
.intro-im h3{
color:#ffffff;
}
.int-tea-content .intro-im h4 {
margin-top: 20px;
font-size:12px;
color:#ef7700;
line-height:1.5;
}
.int-tea-content .intro-im h4 + p {
font-size:15px;
color:#ffffff;
}
.teas .intro1{
position:relative;
left: 30px;
width:300px;
}
.teas .intro2{
position:relative;
left: 130px;
width:300px;
}
.teas .intro2{
position:relative;
left: 130px;
width:300px;
}
.teas .intro3{
position:relative;
left: 260px;
width:300px;
}
.teas .intro4{
position:relative;
left: 10px;
width:300px;
}
.teas .intro5{
position:relative;
left: 120px;
width:300px;
}
.teas .intro6{
position:relative;
left: 770px;
width:300px;
}
.teas .intro7{
position:relative;
left: 900px;
width:300px;
}
</style>
<script type="text/javascript"src="js/jquery.min.js"></script>
</head>
<body>
<!--老师动态效果-->
<divclass="int-tea-content">
<divstyle="width:1200px;height:348px;position:relative;margin:0auto;">
<div class="teas"style="position:absolute;">
<div id="div4"style="width: 180px; left: 300px; position: absolute; z-index:10;">
<imgsrc="images/t04.png" usemap="#map4" style="height:348px;" />
<mapname="map4" id="map4">
<area title="张老师"shape="poly"coords="98,10,94,13,87,23,80,39,83,53,89,66,85,68,85,81,88,81,91,94,92,106,99,110,103,121,109,127,114,136,113,147,108,158,104,164,88,169,82,170,70,173,62,181,56,190,52,200,45,213,40,224,30,243,21,248,13,260,7,268,2,276,1,291,1,308,0,317,14,324,33,334,50,345,53,352,51,385,42,465,232,467,221,398,222,342,214,319,218,308,221,285,228,254,241,218,245,182,214,152,193,135,179,108,179,88,189,70,183,51,181,37,176,13,159,4,124,3"/>
</map>
</div>
<div id="div5"style="width: 170px; left: 420px; position: absolute; z-index:8;">
<imgsrc="images/t05.png" usemap="#map5" style="height:348px;" />
<map name="map5"id="map5">
<area title="邵老师"shape="poly"coords="84,38,69,51,59,70,52,115,47,153,44,186,31,194,5,203,2,214,3,279,8,319,30,407,27,423,24,448,17,466,15,465,189,467,192,442,200,417,219,367,224,338,193,254,180,212,167,196,167,175,167,114,156,64,141,42,126,34,112,29,98,30"/>
</map>
</div>
<div id="div6"style="width: 190px; left: 551px; position: absolute; z-index:6;">
<imgsrc="images/t06.png" usemap="#map6" style="height:348px;" />
<mapname="map6" id="map6">
<area title="朱老师" shape="poly"coords="107,22,87,33,78,46,69,61,67,89,68,98,68,114,59,136,52,167,62,182,40,193,30,213,30,234,23,256,15,292,14,313,9,336,5,353,6,375,11,397,15,423,18,434,25,447,31,459,31,467,198,465,183,396,180,384,196,373,214,342,221,314,225,284,222,231,212,198,185,179,200,171,194,150,182,125,177,96,169,64,147,34,130,24"/>
</map>
</div>
<div id="div7"style="width: 190px; left: 700px; position: absolute; z-index: 4;">
<imgsrc="images/t07.png" usemap="#map7" style="height:348px;" />
<mapname="map7" id="map7">
<area title="许老师" shape="poly"coords="107,22,87,33,78,46,69,61,67,89,68,98,68,114,59,136,52,167,62,182,40,193,30,213,30,234,23,256,15,292,14,313,9,336,5,353,6,375,11,397,15,423,18,434,25,447,31,459,31,467,198,465,183,396,180,384,196,373,214,342,221,314,225,284,222,231,212,198,185,179,200,171,194,150,182,125,177,96,169,64,147,34,130,24"/>
</map>
</div>
<!--intro-->
<div class="intro-imintro4" style="z-index:16;">
<h3>数学巧解能手，张老师，上海同济大学</h3>
<h4>擅长：</h4>
<p>小学数学</p>
<h4>辅导案例：</h4>
<p>重方法，善于通过思路启发、举一反三来激发学生潜能，达到事半功倍的学习效果</p>
</div>
<div class="intro-imintro5" style="z-index:15;">
<h3>“山风老师”，邵老师，交通大学</h3>
<h4>擅长：</h4>
<p>数学</p>
<h4>辅导案例：</h4>
<p>秉承"知识源于生活、教学寓于实践"的理念，让学生在快乐中得到启发</p>
</div>
<div class="intro-imintro6" style="z-index:13;">
<h3>小教高级资质，朱老师，湖州师范学院</h3>
<h4>擅长：</h4>
<p>数学</p>
<h4>辅导案例：</h4>
<p>重方法，善于通过思路启发、举一反三来激发学生潜能，达到事半功倍的学习效果</p>
</div>
<div class="intro-imintro7" style="z-index:11;">
<h3>小学数学高级教师，许老师，隆昌师范学校</h3>
<h4>擅长：</h4>
<p>数学</p>
<h4>辅导案例：</h4>
<p>重方法，善于通过思路启发、举一反三来激发学生潜能，达到事半功倍的学习效果</p>
</div>
</div>
<script type="text/javascript">
$(function () {
$("map[name='map4']").mouseover(function () {
$("#div4").css("z-index", 11);
$("#div2,#div3,#div1,#div5,#div6,#div7").addClass("fade1");
}).mouseout(function () {
$("#div4").css("z-index", 10);
$("#div2,#div3,#div1,#div5,#div6,#div7").removeClass("fade1");
});
$("map[name='map5']").mouseover(function () {
$("#div5").css("z-index", 11);
$("#div2,#div3,#div4,#div1,#div6,#div7").addClass("fade1");
}).mouseout(function () {
$("#div5").css("z-index", 8);
$("#div2,#div3,#div4,#div1,#div6,#div7").removeClass("fade1");
});
$("map[name='map6']").mouseover(function () {
$("#div6").css("z-index", 11);
$("#div2,#div3,#div4,#div5,#div1,#div7").addClass("fade1");
}).mouseout(function () {
$("#div6").css("z-index", 6);
$("#div2,#div3,#div4,#div5,#div1,#div7").removeClass("fade1");
});
$("map[name='map7']").mouseover(function () {
$("#div7").css("z-index", 11);
$("#div2,#div3,#div4,#div5,#div6,#div1").addClass("fade1");
}).mouseout(function () {
$("#div7").css("z-index", 4);
$("#div2,#div3,#div4,#div5,#div6,#div1").removeClass("fade1");
});
});
</script>
<script>
$(document).ready(function(){
$("#div4").hover(function(){
$(".intro4").css("display","block");
},function(){
$(".intro4").css("display","none");
});
$("#div5").hover(function(){
$(".intro5").css("display","block");
},function(){
$(".intro5").css("display","none");
});
$("#div6").hover(function(){
$(".intro6").css("display","block");
},function(){
$(".intro6").css("display","none");
});
$("#div7").hover(function(){
$(".intro7").css("display","block");
},function(){
$(".intro7").css("display","none");
});
});
</script>
</body>
</html>
三、运用的标签
实例
带有可点击区域的图像映射：
<imgsrc="planets.jpg" border="0" usemap="#planetmap"alt="Planets" />
<mapname="planetmap" id="planetmap">
<area shape="circle"coords="180,139,14" href ="venus.html"alt="Venus" />
<area shape="circle"coords="129,161,10" href ="mercur.html"alt="Mercury" />
<area shape="rect"coords="0,0,110,260" href ="sun.html" alt="Sun"/>
</map>
浏览器支持
所有主流浏览器都支持 <map> 标签。
提示和注释：
注释：area 元素永远嵌套在 map 元素内部。area 元素可定义图像映射中的区域。
注释：<img>中的 usemap 属性可引用 <map> 中的 id 或 name 属性（取决于浏览器），所以我们应同时向 <map> 添加 id 和 name 属性。
四、总结
在实际的案例中，使用的JS方法不是很简便，JS还得多加练习，如果大家有更简便的方法，欢迎留言交流，感谢指点。如文章哪里有问题，欢迎大家进行指正。
在网上查看<map>与<area>的相关资料时，有看到张大神的分享“借助area元素实现的链接嵌套demo”,大家有兴趣的，可以了解一下！点击打开链接