ElementorでHP制作をしております。
下のサイトのように地図上の国をクリックしたらそれに合わせてタグも連動して変わるやり方をわかる方いれば教えてください。
3日間探しても全く見当たらず、困っております。。。
参考サイトでも構いません。。。
https://www.santouka.co.jp/shop-foreign#tab1
No.1ベストアンサー
- 回答日時:
こんばんは
>クリックしたらそれに合わせてタグも連動して変わる~
「タグ」ではなく「タブ」ですよね?
「HTMLのタグを書き換えたい」のであれば、スクリプトを利用するしかありません。
タブの切り替えであれば、他の方法も考えられないこともないです。
図形の部分をクリックした範囲によって対応を変える代表的なものに、クリッカブルマップと言われるものがあります。
https://developer.mozilla.org/ja/docs/Web/HTML/E …
ページ内リンクを利用して、CSSのtarget疑似クラスで切り替えることも可能でしょう。
一方で、地図のような複雑な範囲を指定するのはかなり面倒なので、図形そのものをSVGにしてしまうことも多いと思います。
(あるいは、clipで地図画像からSVGの指定範囲を切り取るなど)
https://sakuragraphica.jp/web_construction/web_h …
よく使われる日本地図のようなものであれば、わざわざ自作しなくともSVGデータが配布されていたりもします。
https://geolonia.github.io/japanese-prefectures/ …
ご質問の内容とは直接関係はありませんけれど、ご質問の機能とは別に、タブ単独での切り替え機能も実装していると想像しますので、そちらと両立するように設定する必要があるのではないかと思います。
タブ本体の切り替えをどのような仕組みで行っているのか不明ですが、勝手な想像では、両方向で連動させるのならスクリプトで実装してしまうのが簡単なのではと思います。
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
似たような質問が見つかりました
- WordPress(ワードプレス) ワードプレスで、投稿一覧ページにタグを表示する方法 投稿につけたタグを、記事一覧ページにもカテゴリと 1 2023/05/10 21:41
- HTML・CSS リンクバナーのHTMLタグ。画像を変えたり、設置位置を変えるとバナー貼付け側はどう見える? 2 2023/02/01 12:01
- WordPress(ワードプレス) ホームページのデザインについて「wordpress」 1 2022/08/25 00:30
- Excel(エクセル) 余計なお世話的な「入力規則」?対策は? 2 2023/01/14 12:39
- HTML・CSS WEBサイトの構築。表示データとWEBデザインを分離する考え方を専門用語・業界用語では何と言うか? 8 2022/09/27 09:16
- その他(学校・勉強) この中で間違ってある説明はありますか?詳しい方に教えていただきたいです。 A. 1つのプログラムが複 2 2023/07/14 01:15
- HTML・CSS 画像が分割されて切り替わる、ループアニメーションが作りたい 7 2023/05/27 17:12
- 画像編集・動画編集・音楽編集 Google Earth Pro 高速道路上空を一定の速度で飛ぶツアー動画の作り方は?? 1 2022/06/01 15:10
- その他(IT・Webサービス) ANDROIDタブレットでZOOMのテストサイトを開いてもテストが始まりません https://ww 1 2023/08/26 16:31
- Windows 10 覚えのないアイコンが釘付けされた 3 2022/04/26 19:47
関連するカテゴリからQ&Aを探す
おすすめ情報
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
昔の住所表記を現在の住所表記...
-
[乗換]
-
google map 地図のスケールが分...
-
東西南北の方角がどうしてもわ...
-
住所の書き方について
-
町域とは
-
北海道から沖縄までの距離は何...
-
東西南北がなぜすぐにわかるの?
-
郵便番号の下四桁が「0000」と...
-
上総、下総は上下がなぜ反対な...
-
道路幅がわかるような、できる...
-
地図の縮尺について
-
縮尺5万分の1の地図上で1センチ...
-
住所が不十分でも届くでしょうか?
-
メルカトル図法での大圏コース...
-
記号の意味 GH、FH
-
日本の全長
-
2万分の1の縮尺図 縮尺のcm
-
地図の尺寸 約1/1,000縮尺相当
-
住宅地図 古いをみる方法
おすすめ情報
こんばんは!
タブでした、失礼しました。。。
丁寧なアンサーありがとうございます!
なるほど。。実は私Elementorを使っておりまして、コードがよくわからないんですね。。すみません。
可能であれば、Elementorのホットスポットを使って、タグと連携をしたいと考えておりますが、なかなか調べても分からず。。。
下記のYoutubeではアコーディオンと連携はできているのですが、タブのやり方はまたコードが違うので出来ませんでした、、
【コード】
https://element.how/elementor-hotspot-click-open …