或许做前端到现在你没有接触过图像映射这个东东,但是如果你是一个用过百度大搜索的同学,它就在你的面前,但是你没有注意哦。
---------------真相就是百度首页的中图其实就用了图像映射的原理。
1.图像映射
------------带有可点区域的图像。
2.html标签之map和area
- map标签
-------定义一个
客户端图像映射
<img src="xx.jpg" usemap="#mp" alt="大图" />
<map name="mp" id="mp">
<area></area>
</map>
主要注意以下几点:
- 所以主流的浏览器多支持map
- img标签的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="一部分"/>
属性说明:
- alt
------------用来在图片加载失败的情况下显示替换的文本信息(
这个属性一直被很多的人遗忘)
2. coords
------------定义鼠标可点击的坐标
3. shape
------------定义鼠标可点击的区域的
形状(default/rect/circ/poly)
4. target
------------定义指向的url
5. nohref
------------排除的某个区域