zoukankan      html  css  js  c++  java
  • html5 图片热点area,map的用法

     今天看了一个html5在图片上面创建热点的标签,所谓图片热点就是给你一张图片然后你可以设置点击图片不同的位置进入不同的链接!如果下面是一张图片的话,里面在长方形、圆形、三角形区域都可以进入其他网页!

        

    html5 图片热点area,map的用法

        下面,我们来实例介绍map,area这些标签的用法!

        1,制作矩形热点

    html5 图片热点area,map的用法

        (1),shape标签表示热点的形状,有矩形(rectangle),圆形(circle),多边形(polygon)和整个图片(default)

        (2),coords是每个形状的坐标,不同形状坐标表示不同!上面矩形的坐标(x1,y1,x2,y2),其中(x1,y1)是矩形左上角的坐标,(x2,y2)是矩形右下角的坐标

        2,制作圆形热点

    html5 图片热点area,map的用法

        圆形的坐标(x,y,radius),其中(x,y)是圆心的坐标,radius是圆的半径

        3,制作多边形热点(下面是三角形)

    html5 图片热点area,map的用法

        多边形的坐标(x1,y1,x2,y2,x3,y3,...)有多少组(x,y)坐标就有几个角,也就是说,多边形每一个角的坐标都要在coords中!

        注意:

        1,coords里面的坐标是按照图片大小来的,不是按照浏览器窗口大小来的!所以图片的左上角的坐标是(0,0),右下角是(图片的长,图片的宽)

        2,一般这种确定你想要的区域的坐标,单靠眼睛看是不可能看出来的,所以你需要借助截屏工具来确定区域的坐标!打开截屏工具,从图片的左上角开始拉到你想要的那个点,显示的长和宽就是这个点的坐标!

  • 相关阅读:
    开源图标字体 uiw-iconfont v1.2.6 发布,新增图标
    OAuth授权登录
    网站视觉设计规范
    LOGO有哪几种常规设计思路?
    Web设计规范----控件、组件
    前端工程师的新选择WebApp
    openstack学习-网络管理 (转)
    理解OpenStack与SDN控制器的集成(转)
    NFV MANO 架构
    Raid 磁盘阵列
  • 原文地址:https://www.cnblogs.com/chengqiaoli/p/5354258.html
Copyright © 2011-2022 走看看