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

VWSとは フォーラム X-T9 [ 質問者返信待ち ] マウスオーバーで画像を切り替えたい

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

  • このトピックには2件の返信、3人の参加者があり、最後にmkにより4週前に更新されました。
3件の投稿を表示中 - 1 - 3件目 (全3件中)
  • 投稿者
    投稿
  • #88729

    ■ 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

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

    #88839

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

    #88856

    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.
3件の投稿を表示中 - 1 - 3件目 (全3件中)
  • このトピックに返信するにはログインが必要です。