teratail初投稿です。
WordPressやhtmlなどの初心者なのですがなかなかうまくいかない点があり、友人にも相談したのですが解決することができなかったので質問させていただきました。至らない点など多くあると思いますが、もしよろしければご回答のほどよろしくお願いいたしますm(_ _)m
前提・実現したいこと
WordPressでPopup Makerというプラグインを使用し、イメージマップ(image,map,areaタグ)とポップアップ(popup_trigger)を組み合わせ、画像の中の指定した座標のクリック時にポップアップを表示させるプラグラムを製作中です。
ある1つの座標の範囲である1つのポップアップを出すことにはうまくいったのですが、他の座標で別のポップアップを表示しようとしたときに、うまく行かない問題が発生しました。
発生している問題・エラーメッセージ
上記に記載の通り、[popup_trigger id="697" tag="span"]から1つ目の[/popup_trigger]までの部分は指定した範囲内でid=697のポップアップが正常に出ています。しかし[popup_trigger id="1853" tag="span"]から2つ目の[/popup_trigger]までの部分は1つ目と同じように作成したのにも関わらず、指定した範囲の場所にマウスカーソルをかざしてもクリックすることができませんでした。
[popup_trigger id="697" tag="span"]あいうえお[/popup_trigger] [popup_trigger id="1853" tag="span"]かきくけこ[/popup_trigger]
とした場合、"あいうえお"の文章をクリックした場合にはid=697のポップアップが表示され、"かきくけこ"の文章をクリックした場合にはid=1853のポップアップが正常に表示されたのでおそらくpopup_triggerの使い方自体は間違っていないと思われます。
該当のソースコード
html
1[popup_trigger id="697" tag="span"] 2 3<map name="map1"> 4<area coords="171,460,272,515" shape="rect" /></map>[/popup_trigger] 5 6[popup_trigger id="1853" tag="span"] 7 8<map name="map1"> 9<area coords="62,28,152,107" shape="rect" /></map>[/popup_trigger]
全体のソースコード
前の部分のimage mapを作るために必要な部分はおそらく問題はないと思われるのですが、念のためにソースコードを載せておきます。(wordpressにアップロードした画像のリンクは省略。)
[su_tabs][su_tab title="1階" disabled="no" anchor="" url="" target="blank" class=""]<img class="alignnone size-full wp-image-117" src="使用する画像" alt="" usemap="#map1" width="960" height="540" /> [popup_trigger id="697" tag="span"] <map name="map1"> <area coords="171,460,272,515" shape="rect" /></map>[/popup_trigger] [popup_trigger id="1853" tag="span"] <map name="map1"> <area coords="62,28,152,107" shape="rect" /></map>[/popup_trigger] [/su_tab] [/su_tab][su_tab title="2階" disabled="no" anchor="" url="" target="blank" class=""]未完成[/su_tab] [/su_tabs]
試したこと
[popup_trigger id="697" tag="span"] <map name="map1"> <area coords="171,460,272,515" shape="rect" /><area coords="62,28,152,107" shape="rect" /></map>[/popup_trigger]
のようにした場合にはid=697のポップアップを2つそれぞれ指定した範囲に表示させることができました。
- tag="span"をdivに変えてみましたが症状は変化しませんでした。
補足情報
- WordPress バージョン5.2.2
- Popup Maker バージョン1.8.10
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。