クリッカブルマップ上でマウスオーバーで画像表示

Question

zendamanといます。
会社の部屋のどこの場所にどの在庫がしまってあるかをパソコンで管理しようと
考えています。
部屋の画像（room.jpg）があり、キャビネット（複数ある）をマウスでポイントすると中身の画像（1-1.jpg）が
表示されるようにしたいです。
クリッカブルマップのジェネレーターを使って
クリックできる箇所を下記のように複数作ります。

<img src="room.jpg" usemap="#ImageMap" alt="" />
<map name="ImageMap">
<area shape="rect" coords="137,323,240,543" href="#" alt="" />
<area shape="circle" coords="718,480,54" href="#" alt="" />
<area shape="rect" coords="1254,320,1343,639" href="#" alt="" />
</map>

お聞きしたいのは
・THMLとCSSだけで作れるのかどうか。（当方知識はあまりありません）
（数行のjavascriptですぐ編集して使いまわしできるようなら
javascriptも必要なら使ってみようかと思います。）
※jQueryとかを使わないとできないというこでしたら教えてください。
・レスポンシブ対応にはしないことが条件です。
・マウスオーバーで表示される画像は全て画面の中央に表示されるようにするCSSの記述。

下記のサイトで、文字にマウスオーバーして画像がでていますが、どうやっても
クリッカブルマップ上で画像が表示できません。
<a href="#"></a>を使ってどこを挟んでいいのか。。

この程度のものでいいです。
https://qiita.com/junya/items/80266e89e0f53bc2a054#css

<a href="#">ねこさん</a>

a{
  position: relative;
}

a:after{
  content: "";
  position: absolute;
  top: 1em;
  left: 0;
  display: inline-block;
  pointer-events: none;
  width: 300px;
  height: 300px;
}

a:hover:after{
  background: url(nekosan.JPG); /* 表示する画像 */
  background-size: contain; 
  background-repeat: no-repeat;
  background-position: center top;
}

よろしくお願いいたします。

環境：windows10
ブラウザ：google Chrome

Answer 1

こんにちは。

サンプル

<img src="https://teratail-v2.storage.googleapis.com/uploads/contributed_images/62263a12ec070b7321abafa5c1768dc8.jpeg" usemap="#ImageMap" alt="" />
<map name="ImageMap">
<area shape="rect" coords="137,323,240,543" href="#" alt="" />
<img src="http://placehold.jp/24/eeeeee/cccccc/150x100.png?text=1" alt="">
<area shape="circle" coords="718,480,54" href="#" alt="" />
<img src="http://placehold.jp/24/eeeeee/cccccc/150x100.png?text=2" alt="">
<area shape="rect" coords="1254,320,1343,639" href="#" alt="" />
<img src="http://placehold.jp/24/eeeeee/cccccc/150x100.png?text=3" alt="">
</map> 

map img{
  display:none;
  position:absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;
  
}
area:hover+img{
  display: block;
}