zoukankan      html  css  js  c++  java
  • 点击图片指定地方进跳转不同链接

    <html>

      <body>

        <img src="APP banner1.jpg" border="0" usemap="#planetmap" alt="Planets" />

        <map name="planetmap" id="planetmap">

          <area shape="circle" coords="180,139,14" href ="www.baidu.com" target="_blank" alt="Venus"/>

          <area shape="circle" coords="129,161,10" href ="www.taobao.com" target="_blank" alt="Mercury" />

          <area shape="poly" coords="1000,200,1200,200,1100,400" href="www.baidu.com" />

          <area shape="circle" coords="1000,200,20" href ="https://www.baidu.com/" target="_blank" alt="Sun" />

        </map>

      </body>
    </html>

    <img src="images/kf.png" width="100" height="200" class="hides" border="0" usemap="#planetmap" alt="Planets" />
      <map name="planetmap" id="planetmap">
        <area shape="polygon" coords="3,22,3,46,96,22,96,46" href="http://wpa.qq.com/msgrd?uin=123456789&Site=************&Menu=yes" target="_blank" alt="QQ客服一号" />
        <area shape="polygon" coords="2,81,2,108,98,80,98,108" href="http://wpa.qq.com/msgrd?uin=987654321&Site=************&Menu=yes" target="_blank" alt="QQ客服二号" />
        <area shape="polygon" coords="1,147,1,176,98,147,98,176" href="http://wpa.qq.com/msgrd?uin=123456890&Site=************&Menu=yes" target="_blank" alt="QQ客服三号" />
      </map>

     

    shape属性与coords属性配合,可以规定区域的尺寸/形状和位置。
    shape属性用于定义图像映射中队鼠标敏感区域的形状,<a>和<area>具有此属性。
    default:规定全部区域。
    圆形:circ或circle
    多边形:poly或polygon
    矩形:rect或rectangle

    coords属性规定区域的x和y坐标。图像左上角的坐标是“0,0”。<a>和<area>具有此属性。
    圆形:shape=“circle”,coords=“x,y,r”
    这里的x和y定义了圆心的位置,r是以像素为单位的圆形半径。
    多边形:shape=“polygon”,coords=“x1,y1,x2,y2,x3,y3,...”
    每一对“x,y”坐标都定义了多边形的一个顶点。定义三角形至少需要三组坐标;高纬多边形则需要更多数量的顶点。
    多边形会自动封闭,隐藏在列表的结尾不需要重复第一个坐标来闭合整个区域。

    矩形:shape=“rectangle”,coords=“x1,y1,x2,y2”
    第一个坐标是矩形的一个角的顶点坐标,另一对坐标是对角的顶点坐标,“0,0”是图像左上角的坐标。 

  • 相关阅读:
    正则表达式
    匿名函数作业
    内置函数&匿名函数
    模拟面试题一
    迭代器
    生成器
    装饰器
    函数
    疑问?
    3,app信息抽取
  • 原文地址:https://www.cnblogs.com/54sen/p/7511524.html
Copyright © 2011-2022 走看看