html浅谈之图像投射

2012-09-21

html浅谈之图像映射或许做前端到现在你没有接触过图像映射这个东东，但是如果你是一个用过百度大搜索的同学

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
?? ? ? ?------------排除的某个区域

热点排行

图形图像

html浅谈之图像投射