zoukankan      html  css  js  c++  java
  • HTML图片映射

    <img>图片映射

    <map>与<area>一起使用来定义一个图像映射(一个可点击的链接区域).

    <img src="cat.jpg" alt="圣诞猫" usemap="#catmap">
      <map name="catmap">
          <area shape="" coords="" href="" target="_blank" alt="">
          <area shape="" coords="" href="" target="_blank" alt="">
      </map>  

    <map>中name属性:

    name属性 给map一个名字用来查询,这个属性是必须的,值必须不能为空并且不能带空格。name属性不准与同文档中其他map元素的值相同,如果id属性也被添加,name属性和id属性的值必须相同。


    <area>元素必须拥有一个<map>元素祖先元素,但不一定是直接的父元素。只允许有开始标签不允许有结束标签。 

    <area>中坐标从左上角(0,0)点起,向右x轴,向下y轴,(中心点获取可用qq的截图功能,从左上角开始截图,长宽即为中心点坐标)

    shape属性:“circle”、“rect”、“poly”,

    <area shape="circle" coords="中心点,圆的半径(204,511,50)" href="" alt="">

    <area shape="rect" coords="矩形左上角点的坐标,右下角点的坐标(287,486,359,545)" href="" alt="">

    <area shape="poly" coords="分别列出多边形每个顶点的坐标(x1,y1,x2,y2,x3,y3)" href="" alt="">

    <!DOCTYPE html>
    <html>
    <head>
        <meta charset="utf-8" />
        <title>图片映射</title>
    </head>
    <body>
      <img src="cat.jpg" alt="圣诞猫" usemap="#catmap"> 
      <map name="catmap">
          <area shape="circle" coords="204,511,40" 
    href="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1541497764763&di=f515456a13384605e140751e455323d9&imgtype=0&src=http%3A%2F%2Fpic21.photophoto.cn%2F20111125%2F0017030594470929_b.jpg"
    target="_blank" alt=""> <area shape="rect" coords="287,486,359,545"
    href="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1541497911660&di=59b640621e3342303cfbbef44685075a&imgtype=jpg&src=http%3A%2F%2Fimg4.imgtn.bdimg.com%2Fit%2Fu%3D3414111129%2C2073799617%26fm%3D214%26gp%3D0.jpg"
    target="_blank" alt=""> </map> </body> </html>

      

  • 相关阅读:
    用 ArcMap 发布 ArcGIS Server FeatureServer Feature Access 服务 PostgreSQL 版本
    ArcMap 发布 ArcGIS Server OGC(WMSServer,MapServer)服务
    ArcScene 创建三维模型数据
    ArcMap 导入自定义样式Symbols
    ArcMap 导入 CGCS2000 线段数据
    ArcMap 导入 CGCS2000 点坐标数据
    ArcGis Server manager 忘记用户名和密码
    The view or its master was not found or no view engine supports the searched locations
    python小记(3)操作文件
    pytest(2) pytest与unittest的区别
  • 原文地址:https://www.cnblogs.com/Amy-world/p/9915521.html
Copyright © 2011-2022 走看看