mapタグとareaタグを使って、画像をクリックすると、Lightboxのように、クリックした画像を表示するようにしました。
developer.mozilla.org
developer.mozilla.org
動作を確認していると、areaタグとareaタグの座標が重なっている場合、重なった位置をクリックすると、想定した通りに画像が表示されませんでした。
Photo by NESA by Makers on Unsplash
重なっているんだから仕方ないかと思いましたが、検索してみると、先に書かれているareaタグの座標が優先されると書かれているページがありました。
その通りなのかと試してみると、確かに先に書かれているareaタグの座標が優先されました。
最初はGoogle Chromeで確認しましたが、Mozilla Firefox、Chromium版edge、Mac OS X Safariでも同様です。
どこかでルールとして決まっているのかもしれませんが、MDN Web Docsに書かれていないので、念のため確認作業をしました。
先に書かれているareaタグの座標が優先されるおかげで、小さな領域のareaタグを先に書き、大きな領域のareaタグを後に書いて、小さな領域のareaタグをクリックして、画像を表示できるようになりました。
