昔はよく見かけたareaタグで久しく使っていなったので、改めて記述を確認します。
下記の猫の画像には３つのリンクが配置されています。
猫には丸いエリア、その下のウェルカムボードと、猫の餌のエリアには四角のリンクを設置しています。
CSSやSVGで記述はせず、HTMLのみで表すことができます。
HTMLはこちら
<map name="demo_usemap">
<area
shape="circle"
coords="210,170,50"
href="/"
title="ねこ" />
<area
shape="rect"
coords="20,250,160,340"
href="/"
title="ウェルカムボード" />
<area
shape="rect"
coords="190,310,270,400"
href="/"
title="ねこのえさ" />
</map>
<img
class="demo_img"
usemap="#demo_usemap"
src="https://www.kipure.com/img/demo/cat/019.jpg" />
