A picture, depending on the region, different links Jump

I'm using the two methods,

The first method, using

Reference Site
Note, map can only use px as a unit, so own choice, a good choice.
example:

 <img src="http://img3.imgtn.bdimg.com/it/u=4120146293,3406319282&fm=26&gp=0.jpg"  usemap='demomap' alt='demomap'/>
 <map id='demomap' name='demomap'>
   //shape指的是所选区域的形状，coords指的是区域左上角和右下角的坐标
  <area shape="rect" coords="0,0,279,303" href ="http://www.baidu.com" alt="baidu" />
  <area shape="rect" coords="279,0,600,303" href ="https://www.csdn.net/" alt="csdn" />
</map>

The second method, using the positioning, the label A jump (targeting may not adjusted, code can reference)

example:

 <img src="http://img3.imgtn.bdimg.com/it/u=4120146293,3406319282&fm=26&gp=0.jpg"/>
 <div style="position: absolute; width: 25vw;height: 13vh; top: 0vh; left:7vw; background-image: url(about:blank);background-repeat: no-repeat;background-position: center center;">
   <a target="_blank" href="https://www.facebook.com" style="width:100%;  height: 100%; display: block;"></a>
 </div> 
 <div style="position: absolute; width: 25vw;height: 13vh; top:0vh; left:37vw; background-image: url(about:blank);background-repeat: no-repeat;background-position: center center;">
     <a target="_blank" href="https://www.baidu.com" style="width:100%;  height: 100%; display: block;"></a>
 </div>