html浅谈之图像映射

或许做前端到现在你没有接触过图像映射这个东东，但是如果你是一个用过百度大搜索的同学，它就在你的面前，但是你没有注意哦。

 

---------------真相就是百度首页的中图其实就用了图像映射的原理。

 

1.图像映射

    ------------带有可点区域的图像。

 

2.html标签之map和area

 

 

•    map标签

         -------定义一个客户端图像映射

<img src="xx.jpg" usemap="#mp" alt="大图" />
<map name="mp" id="mp">
    <area></area>
</map>

 主要注意以下几点：

1. 所以主流的浏览器多支持map
2. img标签的usemap属性可引用map中的id或者name属性（存在浏览器的差异）----所以为了屏蔽这个，我们应该在map标签中同时设置id和name属性
3. 对应doctype设置strict/transitional/frameset的我们必须给map设置id属性（值是唯一的）

• area标签

1. 定义图像映射中的区域
2. 它一般多是嵌套在map标签中的

<area shape="circle" coords="120,160,10" href="xxx.html" alt="一部分"/>

 

属性说明：

1. alt

        ------------用来在图片加载失败的情况下显示替换的文本信息（这个属性一直被很多的人遗忘）

     2.  coords

  

        ------------定义鼠标可点击的坐标

 

 

     3.  shape

  

        ------------定义鼠标可点击的区域的形状（default/rect/circ/poly）

     4.  target

        ------------定义指向的url

     5.  nohref

        ------------排除的某个区域