<div id="top" class="area">
  <p>円のリンク先</p>
</div>


<img src="https://shu-naka-blog.com/wp-content/uploads/2021/08/img01-24.jpg" usemap="#ImageMap" width="650" height="290" alt="" />
<map name="ImageMap">
  <area shape="circle" coords="145,152,97" href="#top" alt="" />
  <area shape="poly" coords="441,58,549,57,605,151,550,247,439,246,385,151,440,57,185,39" href="#top02" alt="" />
</map>

<div id="top02" class="area">
  <p>六角形のリンク先</p>
</div>

.area {
		text-align: center;
		padding: 2em 0;
		box-sizing: border-box;
		background-color: #f9f9f9;
	}