マウスオーバーで画像をフェードで切り替えるスクリプトの無料ダウンロード

公開日

2018年11月8日

最終更新日

2021年10月25日

著者

Motohiro Tani

マウスオーバーさせた時に画像を切り替えるのはCSSの:hover疑似要素を使用するのが基本となりますが、フェード演出で切り替えたい場合もありますね。
フェードとは「ふわっと」切り替わる演出とお考えください。

フェード演出にするだけでちょっと上品に見えたりします。
しかし演出の時間が長いと「レスポンス(反応)が悪い」とか「ウザい」となりかねないので、こういうのは適用箇所を限定してほどほどにやるのがベストでしょう。

そのようなフェード演出を簡単に実装できるスクリプトを作りました。
名称は「フェードイメージ スクリプト」とします。

今後私が自分やお客さんのサイトを作る際に組み込みやすいように作りました。
サンプルデモもありますのでぜひお試しください。

現在の最新バージョンは2018年11月08日公開の1.0です。
参考ページ：プログラムをアップデートするの際の思想について

各バージョンごとのアップデート内容については、このページ最下部の「アップデート履歴」に記載してあります。

特長

• HTMLページにも組み込み可能。
• 設定用のファイルなし。サーバにアップロードするだけで動きます。
• 画像(img要素)が何枚あっても適用可能。
• ページが表示された時点でマウスオーバー用の画像をあらかじめ読み込むため、マウスオーバー時に画像読み込みによる遅延は発生しません。
• img要素を包括する親要素はどんな要素でもOK。
  (pでもdivでもh1でもなんでもOK)
• モバイル端末での表示ではhover(マウスオーバー)の機能が必要ないため、マウスオーバー用の画像の読み込みはしないようにしてあります。
  (無駄にページが重くなるのを避けたいため)

フェードイメージ スクリプトのサンプルとダウンロード

フェードイメージ スクリプトのサンプル
このサンプルの2枚目以降の画像は通常時とマウスオーバー時の違いがわかりやすいように、過剰に派手に加工した画像をマウスオーバー用に使用しています。

フェードイメージ スクリプトのダウンロード
無料でダウンロードできます。

使い方の説明(基本設置方法)

まず、動作確認のために以下の作業から順番に確認していくと間違いがないでしょう。

1、フェードイメージ スクリプトをダウンロードし、展開する。

2、フォルダごとサーバにアップロードする。

3、ブラウザでindex.htmlにアクセスし、動作を確認する。

既存サイトへの組み込み方法

以下の作業は同梱のindex.htmlのソースを参考にしなからコピーしていくと間違いがないでしょう。

4、通常時の画像を「●●●●-rollout.jpg」というファイル名で用意する。
これはjpgに限らず、pngでもgifでもOKです。「-rollout」と付いていればOKです。
●●●●の部分は何でも構いません。

5、マウスオーバー時の画像を「●●●●-rollover.jpg」というファイル名で用意する。
これもjpgに限らず、pngでもgifでもOKです。
上記手順4で用意した画像ファイル名と「-rollover」の部分だけが違っていればOKです。

6、フェードで切り替えたい画像にclass=”fade-rollout”を付ける。

<img src="image/●●●●-rollout.jpg" alt="" class="fade-rollout" />

7、jQuery本体とfade-image.jsを読み込ませる。
このfade-image.jsの設置場所もどこでも構いません。
サーバ上にすでにjsという名前のフォルダが存在しているのなら、その中に移動させても問題ありません。

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
<script src="js/fade-image.js"></script>

以上です。
マウスカーソルを画像の上に載せてみて、フェード演出で切り替わるか確認してみましょう。

既存ページへ組み込む際の注意点

このスクリプトを使用すると、各img要素を包括するようにspan要素が動的に挿入されます。
「動的に」の意味が分からない場合は以下のページを参考にしてください。
JavaScriptによってHTMLやCSSを動的に書き変えるとはどういうことかを解説

つまり、元々は以下のようなHTMLだったのが、

<img src="image/●●●●-rollout.jpg" alt="" class="fade-rollout" />

fade-image.jsを読み込むと、以下のようにspan要素がHTML上にブッこまれます。
(fade-rolloverというクラス名のspan要素です)

<span class="fade-rollover"><img src="image/●●●●-rollout.jpg" alt="" class="fade-rollout" /></span>

ですのでもし既存サイトに組み込む際、そのサイトに既にあるCSSでspan要素に対して何らかの設定をしていると、それが上記のspan要素にも適用されてしまう可能性がありますのでご注意ください。
もしCSS設定が競合した場合は、

span.fade-rollover {
  ここに競合をリセットするためのコード。
}

というような感じで、競合しているCSS設定をリセットさせればOKです。

cssフォルダやimageフォルダ、jsフォルダについて

上記の「既存サイトへの組み込み方法」にありますように、このスクリプトではjsファイルの場所を移動させても問題ありません。
動作上、最低限必要なファイルはjQuery本体とfade-image.jsだけです。

CSSフォルダとその中にあるCSSファイルは動作上は不要です。(img要素にマージンを設定しているだけなので)
imageフォルダも動作上はあってもなくても構いません。自由な場所に画像を設置してOKです。

注意点

サポートに関して

カスタマイズに関して

ご希望のカスタマイズがありましたら、お問い合わせページからご依頼ください。

アップデート履歴

2018/11/08　バージョン1.0

• 公開。