WordPressの画像ブロックのロールオーバー設定方法

マウスオーバーしたときに画像が切り替わるロールオーバーを実装してほしいと相談されたので覚書。

仕様

• WordPressのグーテンベルクの画像ブロックを使っているためclassを使う。該当classのついた画像ブロックはロールオーバーするようにする。
• jQueryを使ってロールオーバーを実装する

参考サイト

【JS・jQuery】マウスオーバーで画像を切り替える方法(プラグイン不使用)
コードの詳細などはこちらのサイトをご覧ください。

画像を作成

マウスオーバー時に表示される画像のファイル名は、通常時の画像の名称に「-active」を語尾に追加したものとする。

通常時→　example.png
ロールオーバー→　example-active.png

画像ブロックの設定

画像ブロックのclassに「hover-image」を追加する。このhover-imageはfigureタグに追加される。

jQueryの設置

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>

実装

jQuery( function( $ ){
  $(".hover-image").mouseover(function(){
      $(this).find('img').attr("src",$(this).find("img").attr("src").replace(/^(.+)(\.[a-zA-Z]+)$/, "$1-active$2"))
  }).mouseout(function(){
    $(this).find('img').attr("src",$(this).find("img").attr("src").replace(/^(.+)-active(\.[a-zA-Z]+)$/, "$1$2"));
  })
});

hover-imageのclassがついているfigure要素以下のimg要素をfindで探し、マウスオーバーで-activeを付与、マウスアウトで-activeを外しています。

マウスオーバーとロールオーバーの違い

マウスオーバー マウスポインタを何かの上に乗せる（重ねる）操作。もしくは、マウスポインタが何かの上に乗った（重なった）状態
ロールオーバー マウスポインタを何かの上に乗せる（重ねる）操作を行うことで、乗せた先（ボタンとか画像とか）の見た目が変わる現象のこと
参考：「マウスオーバー」と「ロールオーバー」の違い