マウスオーバー（ホバー）時に画像を切り替えるjQueryプラグイン「hover-image.js」の紹介です。
ロールオーバーイメージとも呼ばれていますが、グローバルナビゲーションなどでよく利用される定番のアレです。
１．デモ
２．設置方法
準備
ロールオーバーイメージ用に、「通常時」と「ホバー時」の２枚の画像を用意しておきます。
その際、ホバー時の画像には、「○○-active.png」のように、ファイル名に「-active」の添え字を追加してサイトフォルダ内の「images」フォルダに保存しておきます。
通常時の画像を<img>タグで配置します。また、その<img>タグに「hover-image」のクラス名を付けます。
<img src="画像.jpg" alt="画像" class="hover-image">手順１ プログラムのダウンロード
以下のサイトより、プログラムをダウンロードしてください。
ダウンロードページ（Github）
手順２ 「hover-image.js」の配置
ダウンロードしたファイルを解凍し、「dist」フォルダ内の「hover-image.js」ファイルのみをサイトフォルダ内の「js」フォルダに配置します。
手順３ スクリプト読み込みコードの記述
(1) jQueryの読み込み
jQueryプラグインですので、jQuery本体の読み込みが必要です。
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>(2) 「hover-image.js」の読み込み
「hover-image.js」を読み込みます。
３．オプション
以下、２つのオプション指定ができます。
- 添え字の変更
- 自身のページで常に画像が切り替わる機能のON/OFF
「hover-image.js」内の以下のコードを変更してください。
const suffix = '-active'; // 切り替わる画像の添え字
const selfPage = true; // 自身のページへのリンク画像を常に切り替る（true/false）