首页 > 代码库 > html5 area实例
html5 area实例
真实页面效果:就是一张图
html代码:
<!DOCTYPE HTML> <html> <style> body{ padding:0px; margin:0px; } </style> <body> <img src ="images/b.jpg" alt="Planets" usemap ="#planetmap" /> <map id ="planetmap"> <area shape ="rect" coords ="10,10,200,300" href ="sun.htm" alt="Sun" /> <area shape ="circle" coords ="300,200,200" href ="mercur.htm" alt="Mercury" /> <area shape ="circle" coords ="500,240,200" href ="venus.htm" alt="Venus" /> <!--直线--> <area shape="poly " coords="100,240,200,100,100" href="venus.htm" alt="Venus"> <!--三角形--> <area shape="poly " coords="100,240,200,100,100,100" href="venus.htm" alt="Venus"> </map> </body> </html>
PS:
定义和用法
shape 属性与 coords 属性配合,可以规定区域的尺寸、形状和位置。
详细解释:
shape 属性用于定义图像映射中对鼠标敏感的区域的形状:
- 圆形(circ 或 circle)
- 多边形(poly 或 polygon)
- 矩形(rect 或 rectangle)
1、圆形效果图:
2、长方形效果图:
3、直线效果图:
4、三角形效果图:
html5 area实例
声明:以上内容来自用户投稿及互联网公开渠道收集整理发布,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任,若内容有误或涉及侵权可进行投诉: 投诉/举报 工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。