HTML <map>标签，定义客户端图像映射

<map>标签

map元素可以用于定义一个客户端的图像映射。而什么是图像映射呢？差不多就是一个图像可以划分出一些可点击的区域。是不是有点像那种“大家来找茬”的小游戏？！map元素一般同area元素一同使用，其中area可以用于指定图像中可点击的区域的坐标和形状。

<map></map>

提示：map元素包含起始标签和结束标签。

---

map元素的属性

属性	描述
id	值为自定义文本
name	值为自定义文本，为map命名，并用于绑定img图像元素

map元素实例代码，及在线编辑器

下方的实例将图片划分成三个区域，点击对应的区域将执行相应的函数（注意鼠标形状变化，在文字的右上角）：

<div>
<p style='position:absolute;top:50px;left:20px;'>三</p>
<p style='position:absolute;top:150px;left:180px;'>一</p>
<p style='position:absolute;top:180px;left:128px;'>二</p>
<img src="../../static/img/test.jpg" border="0" usemap="#e1" alt="e1" style='width:100%;height:100%;'/>

<map name="e1" id="e1">
  <area shape="circle" coords="180,138,15" href ="javascript:do1(1);" alt="一" />
  <area shape="circle" coords="128,180,11" href ="javascript:do1(2);" alt="二" />
  <area shape="rect" coords="0,0,100,250" href ="javascript:do1(3);" alt="三" />
</map>
</div>
<script>
  function do1(arg){
    alert(arg)
  }
</script>

试一试