ソフトウェア開発者の日常

こだわりなく書きたいことを書いていきます。

areaタグの順序で、思い通りにクリックできるようにする

mapタグとareaタグを使って、画像をクリックすると、Lightboxのように、クリックした画像を表示するようにしました。
developer.mozilla.org
developer.mozilla.org

動作を確認していると、areaタグとareaタグの座標が重なっている場合、重なった位置をクリックすると、想定した通りに画像が表示されませんでした。

コーディング中
Photo by NESA by Makers on Unsplash

重なっているんだから仕方ないかと思いましたが、検索してみると、先に書かれているareaタグの座標が優先されると書かれているページがありました。
その通りなのかと試してみると、確かに先に書かれているareaタグの座標が優先されました。

最初はGoogle Chromeで確認しましたが、Mozilla FirefoxChromium版edge、Mac OS X Safariでも同様です。
どこかでルールとして決まっているのかもしれませんが、MDN Web Docsに書かれていないので、念のため確認作業をしました。

先に書かれているareaタグの座標が優先されるおかげで、小さな領域のareaタグを先に書き、大きな領域のareaタグを後に書いて、小さな領域のareaタグをクリックして、画像を表示できるようになりました。