マウスオーバーで画像を切り替える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

以下のコードを<head>内に追記し、適宜変更してください。

<script>
 $(function() {
  $('.hover-image').hoverImage({
   suffix: '-active', // 添え字
   self: true, // 自身ページの常時切り替え
  });
 });
</script>

コメントを残す

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