html浅谈之图像映射

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

?

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

?

1.图像映射

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

?

2.html标签之map和area

?

?

?? map标签?? ? ? ? -------定义一个客户端图像映射

<img src="xx.jpg" usemap="#mp" alt="html浅谈之图像投射" /><map name="mp" id="mp">    <area></area></map>

?主要注意以下几点：

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

area标签

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

<area shape="circle" coords="120,160,10" href="xxx.html" alt="html浅谈之图像投射"/>

?属性说明：

alt

?? ? ? ?------------用来在图片加载失败的情况下显示替换的文本信息（这个属性一直被很多的人遗忘）
?? ? 2. ?coords ?? ?? ? ? ?------------定义鼠标可点击的坐标

?

?

?? ? 3. ?shape???? ? ? ?------------定义鼠标可点击的区域的形状（default/rect/circ/poly）
?? ? 4. ?target
?? ? ? ?------------定义指向的url
?? ? 5. ?nohref
?? ? ? ?------------排除的某个区域

?