[ 質問者返信待ち ] マウスオーバーで画像を切り替えたい

[ksa]

■ WordPress のバージョン
6.4.3

■ テーマ・プラグインは全て最新版で確認してください。
確認しました。

■ テーマの種類
X-T9

■ テーマのバージョン
1.69.1.2

■ 期待する動作
Gifを二つ（Aは静止画、Bはgif動画）を準備して、マウスオーバーで画像を切り替えられるようにしたいです。

■ 自分で試した事
<figure class=”wp-block-image size-large is-style-default”>alt=”” class=”wp-image-165,166″/></figure>

上記を画像エリアに書いてみたのですが画像として認識されませんというエラーが表示されます
すみませんが正しい指定の仕方や別の解決方法があればお教えいただきたいです。
プラグインを利用してマウスオーバーで画像切り替えする方法があればそちらもお教えいただきたいです。既にImage Hover Effects – WPBakery Addon Free Versionを入れてみたのですが、プラグインの導線が現れず困っております。

■ 症状が発生するブラウザ
chrome、edge

■ 実際の症状
画像が認識されません

[しあわせ屋根屋]

単純にカスタムHTMLブロックを追加して、
<img src="" onmouseover="this.src=''" onmouseout="this.src=''">
でどうでしょう。

[mk]

お世話になっております。ベクトルスタッフの松田と申します。
プラグインを利用してマウスオーバーで画像切り替えする方法は思いつきませんが、ブロックを組み合わせてマウスオーバーで画像を切り替える方法として、以下をお試しいただけたら幸いです。

1. 画像ブロックで2枚の画像を用意
2. 画像ブロックの [設定] > [アスペクト比] を揃える(画像1枚目参照)
3. 2枚の画像をグループブロックで囲む(画像2枚目参照)
4. グループブロックのカスタムCSSに以下をコピペ(画像3枚目参照)

selector {
  position: relative;
}

selector > .wp-block-image:first-of-type,
selector > .wp-block-image:last-of-type {
  transition: .1s;
}

selector:hover .wp-block-image:first-of-type {
  opacity: 0;
}

selector .wp-block-image:last-of-type {
  opacity: 0;
  position: absolute;
  top: 0;
  margin-block-start: unset !important;
}

selector:hover .wp-block-image:last-of-type {
  opacity: 1;
}

/* 管理画面用 */
selector.block-editor-block-list__block {
  position: unset;
}

selector.block-editor-block-list__block .wp-block-image {
  opacity: 1 !important;
}

5. 1〜4までの状態でプレビューすると、画像4枚目のようにオンマウスで切り替わると思われます。(gif動画ですが動かなかったらすみません。)
スマホの時はオンマウスの代わりに画像と画像の外側をタッチすることで切り替わるようになってます。

※上記ですが、もしご活用いただけそうでしたら、VKパターンライブラリへの追加を検討する可能性があります。

Attachments:

You must be logged in to view attached files.

[ksa]

松田様
ご対応有難うございます。
松田様からご提示いただいた挙動と私のやりたいことが一致しておりますので、お示しいただいた内容で試しているのですが、１と３の手順はどう実現すればよいでしょうか？
当方パターンライブラリにある”スタッフインタビュー”をX-T9で利用しておりますが、画像ブロックのエリアでは画像をアップする機能が表示されていないため松田様が貼り付けてくださったことが出来ずにおります。
試しにカラム内の画像エリアに二つのGifを乗せてみたのですがグループロックもできませんでした。
申し訳ありませんがお教えくださいませ。

[mk]

ご返信ありがとうございます。

今回のご連絡を受けて、マウスオーバー(オンマウス)で画像を切り替え用のパターンを作ってみました。

マウスオーバー(オンマウス)で画像を切り替え

こちらからお好きなものを使っていただけたら幸いです。

[投稿者]

投稿