クリッカブルMAP領域が分かる様にする設定は？

1枚の画像の上に、クリッカブルマップで複数のリンク個所を定義しているのですが、いまいち定義した箇所が分かりにくいので、何か定義した領域が分かる様に設定できないでしょうか？

もし可能であれば、CSSなどで、マウスオーバー時などにopacityなどでうっすら色がついたり、borderでリンクの領域が分かる様にでいないでしょうか？色々とCSSを試すのですが、全く画像に何も反映されない状態で困っております。

できれば、Google Chromeのデベロッパーツールのスマホ表示の際にも、領域が確認できればと思いますが、スマホはマウスオーバーが無いので難しいでしょうか？
アドバイスをお願いいたします。

No.3 ベストアンサー 回答者： fujillin 回答日時： 2021/05/27 21:25

No1です。

＞画像自体をこちらで決めれないので、作成の際にマウスオーバー
＞しながら何か確認ができる方法があればと思いました。
作成するといいながら、制約があるということですね。
何が自由にできて、何が自由にできないのか不明なので、対処法を考えにくいですけれど・・・

＞ちなみに、最終的にはこの確認用の描画は無くします
エンドユーザーのユーザビリティとは関係ないってことですね。

目的がよくわかりませんけれどけれど、与えられた画像にAREAを設定する作業をしていて、正しい位置にマップできているかを確認したいってなことかと勝手に想像してみました。
…であるなら、ブラウザに表示させた状態で当該画像をフォーカスし、Tabキーを押せば、順にAreaに対応するエリアが表示されます。
（PC版のChrome、fxにて確認。スマホは確認してません。）


添付図は、画像に対して
<map name="test">
<area shape="circle" coords="150,120,90" href="hoge.html" />
<area shape="circle" coords="300,100,90" href="fuga.html" />
</map>
を設定し、上記の操作をした際の、2番目のエリアを表示しているところです。
（中央の黒丸がそれに該当）
（表示のされ方は、ブラウザによって異なります）
ってなのは、役に立つのでしょうか？？


※ スクリプトで、同じサイズのcanvasを設定して、各エリアに対応した範囲を半透明の色掛けする方法とかも考えましたけれど、それが自由にできるのかも不明だし、それなりに手間なので、まずは、上記でも十分なのかも知れないと…

この回答へのお礼

何度も有難うございます。
こんな方法があったのですね、スマホ表示でも確認ができましたので大変助かりました。
有難うございました！！

お礼日時：2021/05/28 09:19

No.2 回答者： gura_ 回答日時： 2021/05/27 17:28

yuyukina さん

　>････定義した領域が分かる様に設定･･････

こちらの方法は如何ですか↓
https://tech.brick-plan.jp/tooltip/tooltip-patte …
https://teratail.com/questions/41770

この回答へのお礼

有難うございます。
少々希望するものと用途が違うようです、有難うございます。

できれば、よくDIV要素をマウスオーバーすると中身に色がついたりしますよね？そんな感じで指定した画像のMAP領域が確認できると嬉しいのですが…。
やはり画像上ではむずかしいでしょうか…。

お礼日時：2021/05/27 19:39

No.1 回答者： fujillin 回答日時： 2021/05/27 13:34

こんにちは

表示している画像に何らかの意味があるのでしょうから、領域がわかるような画像にしておけば良いのではないでしょうか？

例えば、日本全体の図をクリックする際に、全体のシルエットだけでは、どこの県をクリックしたかは曖昧になります。
これに対して、県境を記入した図を用いることで、領域を明らかにすることができるようになります。
その際には、図の領域とクリッカブルマップの領域の整合を取っておくのはもちろんですけれど。

この回答へのお礼

有難うございます。
>>領域がわかるような画像にしておけば良いのではないでしょうか？
画像自体をこちらで決めれないので、作成の際にマウスオーバーしながら何か確認ができる方法があればと思いました。

一番いいのは、CSSだけでマウスオーバーで半透明な赤色とかでMAPで指定した領域が表示されるとわかりやすいです。
ちなみに、最終的にはこの確認用の描画は無くします、あくまで作成の段階で確認できたらと思います。

お礼日時：2021/05/27 19:37