マウスオーバーしたときに画像が切り替わるロールオーバーを実装してほしいと相談されたので覚書。
仕様
- 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を外しています。
マウスオーバーとロールオーバーの違い
マウスオーバー マウスポインタを何かの上に乗せる(重ねる)操作。もしくは、マウスポインタが何かの上に乗った(重なった)状態
ロールオーバー マウスポインタを何かの上に乗せる(重ねる)操作を行うことで、乗せた先(ボタンとか画像とか)の見た目が変わる現象のこと
参考:「マウスオーバー」と「ロールオーバー」の違い