Q&A
画像を表示し、マウスオーバーした際、GIF画像を表示するようにしたい
マウスオーバーを外した際、元の画像に戻るようにしたい
実現できるHTMLの作り方を教えてください
もしくは、実現できるプラグインを教えてください
バージョン情報
ワードプレス：6.9.4
テーマ：Vertice （バージョン: 1.0.91）
画像ブロックを使い、「HTMLとして編集」で以下HTMLを打ち込んでみた
画像は、それぞれメディアライブラリーに登録済み
メディアライブラリーから確認できるURLを記入した
＜img src="元々表示する画像のURL" onmouseover="this.src='マウスオーバーした際に表示するGIFのURL'" onmouseout="this.src='元々表示する画像のURL'"＞
結果
「このブロックには、想定されていないか無効なコンテンツが含まれています。」と表示される
ソースに誤りは無いと思われます。恐らくパーサーに問題を抱えているのかもしれません。
「このブロックには、想定されていないか無効なコンテンツが含まれています。」と表示される
その右横に表示されている「︙」でメニューを開いて「HTMLに変換」でも無理なのですか？
@PC025
Questioner
ご返信ありがとうございます。
ご教示いただいた手順を試してみましたが、「HTMLに変換」をクリックしても、反応がありません
入力したタグ：＜img src="http://primeclub001.biz/2026ibwk3a/wp-content/uploads/2026/04/E382ADE383A3E383A9E382AFE382BFE383BC270.png
" onmouseover="this.src='http://primeclub001.biz/2026ibwk3a/wp-content/uploads/2026/04/Whisk_リサイズ.gif'" onmouseout="this.src='http://primeclub001.biz/2026ibwk3a/wp-content/uploads/2026/04/E382ADE383A3E383A9E382AFE382BFE383BC270.png
'"＞
「復旧を試みる」をクリックした際のタグ：＜figure class="wp-block-image size-full"><img src="https://primeclub001.biz/2026ibwk3a/wp-content/uploads/2026/04/E382ADE383A3E383A9E382AFE382BFE383BC270.png" alt="" class="wp-image-72"/＞＜/figure＞
「ギャラリー」ブロックでは、こういった動的な事は、できないのでしょうか？
「画像」ではなく「ギャラリー」でしたか。
たしかに同じ現象があります（前者ではHTMLに変換した状態が保てていますが後者はボタンが反応しません）。ただエラーメッセージを無視してそのまま保存すると一応出力はするようです。
WP側の問題を強く感じます。
不具合の修正を待つか、カスタム HTMLでやり過ごすというのも手かも知れません。
@PC025
Questioner
ご返信ありがとうございます。
カスタムHTMLのブロックを置いて、HTMLを書き込むことで、マウスオーバー時の動作ができました。
マウスを外した時、オーバー時のものに置き換わったままなので、もう少し考える必要があると思いますが、一応形にはなりました
ご協力、ありがとうございました
See the Pen WordPress Gallery ImgSrc Change by benjuwan (@benjuwan) on CodePen.
既に解決されていらっしゃるかもですが、HTMLタグを直接触るのではなくJSを使った処理でしたら【画像を表示し、マウスオーバーした際、GIF画像を表示するようにしたい
マウスオーバーを外した際、元の画像に戻るようにしたい】というのに近い挙動を実現できるかと思います。
少しでも参考になりますと幸いです。
