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

• 公開日 : 2018年11月8日
• 最終更新日 : 2018年11月8日

マウスオーバーさせた時に画像を切り替えるのは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を読み込ませる。
このpagetop-scroll.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です。

注意点

本プログラムの使用においていかなる損害が発生したとしても、当方は責任を負いません。
了承していただける方のみご利用ください。

不具合などありましたら、サポートBBSからご連絡ください。
アップデートの際に修正する可能性があります。

サポートに関して

無料のものですから、基本的にはサポートはありません。
が、初期状態での設置でエラーが出る場合は、サポートBBSにて無償対応いたしております。

初期状態とは、すべてのファイルを一切編集していない状態のことを指します。
それ以外のファイルが編集されていたり、既存サイトに組み込んだ場合などのお問い合わせは有償となりますので、ご了承ください。

しかし例外として、当サイト上で解説されているカスタマイズ方法だけを実践して正常動作しない場合は、無償サポート対象内になります。
その理由は、そのような使い方を想定してプログラムが作られているからです。

カスタマイズに関して

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

アップデート履歴

2018/11/08　バージョン1.0

• 公開。