首页 > 代码库 > 图像映射
图像映射
<img src="planets.jpg" border="0" usemap="#planetmap" alt="Planets" /> <map name="planetmap" id="planetmap"> <area shape="circle" coords="180,139,14" href ="venus.html" alt="Venus" /> <area shape="circle" coords="129,161,10" href ="mercur.html" alt="Mercury" /> <area shape="rect" coords="0,0,110,260" href ="sun.html" alt="Sun" /> </map>
注:<img>中的 usemap 属性可引用 <map> 中的 id 或 name 属性(取决于浏览器),所以我们应同时向 <map> 添加 id 和 name 属性。
图像映射需要用到的标签包括:
- <img>
- <map>
- <area>
<area>标签属性:
shape属性详细解释:
shape 属性用于定义图像映射中对鼠标敏感的区域的形状:
-
- 圆形(circ 或 circle)
- 多边形(poly 或 polygon)
- 矩形(rect 或 rectangle)
shape 属性的值会影响浏览器对 coords 属性的解释。如果未使用 shape 属性,那么会假设使用值 default。依照标准,default 意味着该区域覆盖整个图像。在实际中,浏览器默认使用矩形区域,并期望能找到 4 个 coords 值。如果没有指定形状,而且在标签中也没有包括 4 个坐标,那么浏览器会忽略整个区域。
可以识别 shape 属性的 default 值的浏览器,可以提供一个包括全部热点的区域,以用于在超过其他热点定义的范围之外单击的情况。由于区域在 <map> 标签中是采用“先来先得”的顺序,所有必须将默认区域放置在后面。否则,默认区域会覆盖其他的图像映射中出现的所有区域。
浏览器在形状名称的实现方面没有严格要求。例如,对于矩形,Netscape 4 不能识别 "rectangle",却能识别 "rect"。出于这个原因,我们建议使用缩写的名称。
图像映射
声明:以上内容来自用户投稿及互联网公开渠道收集整理发布,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任,若内容有误或涉及侵权可进行投诉: 投诉/举报 工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。