码迷,mamicode.com
首页 > Web开发 > 详细

html5 area实例

时间:2017-02-09 12:50:15      阅读:264      评论:0      收藏:0      [点我收藏+]

标签:size   code   add   padding   --   http   blog   htm   ges   

真实页面效果:就是一张图

技术分享

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实例

标签:size   code   add   padding   --   http   blog   htm   ges   

原文地址:http://www.cnblogs.com/zoro-zero/p/6381475.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!