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>

      

  • 相关阅读:
    C++文件流类与文件流对象
    当java出现异常,应如何进行处理
    C语言函数的声明以及函数原型
    MySQL的create table as 与 like区别
    java中BigDecimal加减乘除基本用法
    项目小结
    自动化测试 如何快速提取Json数据
    Java Map 集合类在selenium自动化测试设计中的应用
    UFT对于PDF 文档的操作方法 VBS代码
    Selenium 自动化测试中对页面元素的value比较验证 java语言
  • 原文地址:https://www.cnblogs.com/Amy-world/p/9915521.html
Copyright © 2011-2022 走看看