クリッカブルマップを作成する際にchromeでうまく動かなかったことがありましたのでまとめます。
imagemapを使ったクリッカブルマップのcursorが効かない
今回javascriptで動的に作成したクリッカブルマップはこんな感じのコード。
<img src="" usemap="#image-map">
<map name="image-map">
<area id="" title="" href="" target="" coords="" shape="">
</map>
ちなみに
areaはmapを親要素にしてappendChild
( map.appendChild(area) )
mapはimgを親要素にしてappendChildしました。
( img.appendChild(map) )
Chromeでcursorpointerが効かない
areaのIDを指定して、
doucument.getElementById("areaのID").style.style.cursor="pointer";
と記述していざ実行する。
しかし該当の場所にカーソルを合わせてもポインターは機能しない。
スペルミス、コードいろいろ見直したが特に問題点は思い浮かばなかったので他のブラウザで検証してみたところすんなり機能しました
chromeバージョン: 78.0.3904.108でimagemapのcursorpointerが機能しない
FireFox,Edge,IEと動きが確認できたところで気付きました。
「これChromeが悪いのでは、、？」
どうやら上記のコードではchromeバージョン: 78.0.3904.108ではうまくpointerが反映されないっぽいです。
javascriptで作ったcursorがchromeでうまくいかないときの解決方法
そうは言ってもChromeはみんなが使うブラウザ。
ここで妥協は許されない！
ということで、chromeでもうまくcursor:pointerを機能させることができたので紹介します。
今回はappendChildの親要素を変更したところchromeを含む全てのブラウザで機能しました。
areaの親要素をbodyにしたらいけました！
こんな感じです。
map.appendChild(area)
↓
document.body.appendChild(area)
良かったぁ
まとめ
chromeでjavascriptで動的に作ったクリッカブルマップのcursorが効かない時はノードの階層を変えてみるとうまく動くかも
階層を変えたらうまくいったことに関して完全には附に落ちてないです、、
まだまだ修行が必要です。
もしわかる方がいたらTwitterで教えてくださるとありがたいです！
