JavaScript

javascriptで動的に作ったクリッカブルマップのpointerがchromeでうまく動かないときに試したこと

2019年12月10日

 

クリッカブルマップを作成する際に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で教えてくださるとありがたいです!

プログラミングスクールに関する情報

【無料あり】プログラミングスクールおすすめランキング【WEBエンジニアになりたい方向け】と書かれた画像
【無料あり】プログラミングスクールおすすめランキング【WEBエンジニアになりたい方向け】

  あなたプログラミングスクールに通いたいけどたくさんありすぎてどこがいいのかわかりません。   最近はエンジニアブームということもありプログラミングスクールが増えました。 一方でたくさんありすぎてど ...

続きを見る

返金保証ありのプログラミングスクールランキング【エンジニアが選びました】と表示されたパソコンの画面
【転職保証つき】返金保証ありのプログラミングスクールランキング【エンジニアが選びました】

  あなた返金保証がついているオススメのプログラミングスクールってありますか?   結論から話すと、返金保証つきのプログラミングスクールランキングは次の通りです。   1位:DMMWEBキャンプ  【 ...

続きを見る

wordpress
【無料あり】WEB制作を学べるオンラインスクールランキング【副業で稼ぎたい方向け】

  あなたWeb制作の副業で稼ぎたいけど、どのスクールで学ぶのが良いの? スクール選びで失敗はしたくないです。   ↑このような疑問や不安を解決するべく、現役のWebエンジニアがWEB制作を学べるスク ...

続きを見る

フリーランス
無料あり:フリーランスを目指せるプログラミングスクールランキング【体験をもとに徹底分析しました】

  あなたフリーランスエンジニアを目指すことができるプログラミングスクールってありますか?   最近では、高年収や働きやすさの魅力からフリーランスエンジニアを目指す方も増えてきました。 結論から話すと ...

続きを見る

WEB系自社開発企業にいけるプログラミングスクールランキング【現役エンジニアおすすめ】と書かれた画像
WEB系自社開発企業にいけるプログラミングスクールランキング【現役エンジニアおすすめ】

  あなたWEB系の自社開発企業に就職したいです。 オススメのスクールを教えて下さい。   結論から話すと、WEB系自社開発に行きやすいスクールのランキングは以下の通り。   第1位:テックアカデミー ...

続きを見る

-JavaScript

© 2024 エンジニアてんし君ブログ