マウスオーバーさせた時に画像を切り替えるのはCSSの:hover疑似要素を使用するのが基本となりますが、フェード演出で切り替えたい場合もありますね。
フェードとは「ふわっと」切り替わる演出とお考えください。
フェード演出にするだけでちょっと上品に見えたりします。
しかし演出の時間が長いと「レスポンス(反応)が悪い」とか「ウザい」となりかねないので、こういうのは適用箇所を限定してほどほどにやるのがベストでしょう。
そのようなフェード演出を簡単に実装できるスクリプトを作りました。
名称は「フェードイメージ スクリプト」とします。
今後私が自分やお客さんのサイトを作る際に組み込みやすいように作りました。
サンプルデモもありますのでぜひお試しください。
現在の最新バージョンは2018年11月08日公開の1.0です。
各バージョンごとのアップデート内容については、このページ最下部の「アップデート履歴」に記載してあります。
フェードイメージ スクリプトのサンプル
このサンプルの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です。
上記の「既存サイトへの組み込み方法」にありますように、このスクリプトではjsファイルの場所を移動させても問題ありません。
動作上、最低限必要なファイルはjQuery本体とfade-image.jsだけです。
CSSフォルダとその中にあるCSSファイルは動作上は不要です。(img要素にマージンを設定しているだけなので)
imageフォルダも動作上はあってもなくても構いません。自由な場所に画像を設置してOKです。
本プログラムの使用においていかなる損害が発生したとしても、当方は責任を負いません。
了承していただける方のみご利用ください。
不具合などありましたら、サポートBBSからご連絡ください。
アップデートの際に修正する可能性があります。
無料のものですから、基本的にはサポートはありません。
が、初期状態での設置でエラーが出る場合は、サポートBBSにて無償対応いたしております。
初期状態とは、すべてのファイルを一切編集していない状態のことを指します。
それ以外のファイルが編集されていたり、既存サイトに組み込んだ場合などのお問い合わせは有償となりますので、ご了承ください。
しかし例外として、当サイト上で解説されているカスタマイズ方法だけを実践して正常動作しない場合は、無償サポート対象内になります。
その理由は、そのような使い方を想定してプログラムが作られているからです。
ご希望のカスタマイズがありましたら、お問い合わせページからご依頼ください。
ファーストステップでは人や世の中の役に立つプログラムを作っています。
ぜひ色々使ってみて、改善点や要望などがあればお申し出ください。