点击图片指定地方进跳转不同链接

<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”是图像左上角的坐标。 

原文地址:https://www.cnblogs.com/54sen/p/7511524.html