关于HTML图片跳转的范围设置

如图，我希望我点击西瓜的时候，能跳转到百度的页面。
我能保证参数，比如圆的坐标，半径，图片的相对路径都没问题，但是现在却起了反效果。
当我把鼠标移到图片上的时候，显示可以点击了，而且我单击图片就会跳转，而我将鼠标移到西瓜上的时候，就无法点击了，呈现完全相反的效果。
出现的情况也说明了我的参数是没问题的，因为跳转的页面，圆也就是西瓜的圆心，半径都没问题，但就是不知道为什么，默认应该是我圈出来的圆才能跳转啊，怎么变成了图片之内，圆之外的地方可以点击跳转，反而圆之内就不行了，这串代码有什么问题吗？

你的逻辑明显有错误。
a 你是加到了整个图片上了。
要想实现你划定区域的跳转，就要这样写：

 <img src="img/ditu.png" usemap="#directionMap"/>
    <map name="directionMap" id="directionMap">
        <area shape="circle" coords="270,135,15" href="https://www.baidu.com" ></area>
    </map>
```html

```