マウスオーバーで画像を切り替えるjQueryプラグイン「hover-image.js」の紹介

マウスオーバー(ホバー)時に画像を切り替えるjQueryプラグイン「hover-image.js」の紹介です。

ロールオーバーイメージとも呼ばれていますが、グローバルナビゲーションなどでよく利用される定番のアレです。

1.デモ

DEMO

2.設置方法

準備

ロールオーバーイメージ用に、「通常時」と「ホバー時」の2枚の画像を用意しておきます。

その際、ホバー時の画像には、「○○-active.png」のように、ファイル名に「-active」の添え字を追加してサイトフォルダ内の「images」フォルダに保存しておきます。

通常時の画像を<img>タグで配置します。また、その<img>タグに「hover-image」のクラス名を付けます。

<img src="画像.jpg" alt="画像" class="hover-image">

手順1 プログラムのダウンロード

以下のサイトより、プログラムをダウンロードしてください。
ダウンロードページ(Github)

手順2 「hover-image.js」の配置

ダウンロードしたファイルを解凍し、「dist」フォルダ内の「hover-image.js」ファイルのみをサイトフォルダ内の「js」フォルダに配置します。

手順3 スクリプト読み込みコードの記述

(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」を読み込みます。

3.オプション

以下、2つのオプション指定ができます。

  • 添え字の変更
  • 自身のページで常に画像が切り替わる機能のON/OFF

「hover-image.js」内の以下のコードを変更してください。

  const suffix = '-active'; // 切り替わる画像の添え字
  const selfPage = true; // 自身のページへのリンク画像を常に切り替る(true/false)

コメントを残す

メールアドレスが公開されることはありません。