zoukankan      html  css  js  c++  java
  • 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、三角形效果图:

  • 相关阅读:
    using 关键字在 C++ 中的几种用法
    Chromium 修改图片资源
    SAM&广义SAM
    Burnside和Polya
    笔记:杜教筛
    笔记:莫比乌斯反演
    Miller-Rabin
    点分治
    虚树
    计算几何
  • 原文地址:https://www.cnblogs.com/zoro-zero/p/6381475.html
Copyright © 2011-2022 走看看