zoukankan      html  css  js  c++  java
  • Study 2 —— 图片热点区域

    标记<map>和<area>
    <img src="图片" usemap="#名称">
    <map id="#名称">
    <area shape="rect" coords="10,10,100,100" href="#">
    <area shape="circle" coords="120,120,50" href="#">
    <area shape="poly" coords="78,13,81,14,53,32,86,38" href="#">
    </map>

    语法格式:
    (1)插入图片,增加图片属性usemap,说明该图像是热区映射图像,属性值必须以“#”开头,如#img.
    那么上面的代码就应该为<img src="图片地址" usemap="#img">
    (2)<map>标记只有一个属性id,其作用是为区域命名,属性值必须与<img>标记的usemap属性值相同。
    修改上述代码为:<map id="#img">
    (3)<area>标记主要是定义热点区域的形状及超链接,它有三个相应的属性:
    1.shape属性,控件划分区域的形状,其取值有3个,分别是rect(矩形),circle(圆形)和poly(多边形)
    2.coords属性,控制区域的划分坐标:
    a.如果shape属性取值为rect,那么coords的设置值分别为矩形的左上角x、y坐标点和右下角x、y坐标点,单位为像素
    b.如果shape属性取值为circle,那么coords的设置值分别为圆形圆心x、y坐标点和半径值,单位为像素
    c.如果shape属性取值为poly,那么coords的设置值分别为多边形各个点的x、y坐标点,单位为像素
    3.href属性是为区域设置超链接的目标,设置值为“#”时,表示为空链接
  • 相关阅读:
    【leetcode】135. Candy
    【leetcode】224. Basic Calculator
    【leetcode】72. Edit Distance
    【leetcode】712. Minimum ASCII Delete Sum for Two Strings
    The Saltwater Room
    New Concept English three (45)
    2017.11.23 display fun --STM8
    New Concept English three (44)
    New Concept English three (43)
    2017.11.18 IAP下载(STM8,PIC,STM32)
  • 原文地址:https://www.cnblogs.com/vurtne-lu/p/7975871.html
Copyright © 2011-2022 走看看