画像をフェードで切り替えるロールオーバーを、jQueryでシンプルに実現したサンプルを見つけたのでメモ。
ナビゲーション画像などをフェードで切り替えるJavaScriptはいくつかありますが、その中から「いいな」と思うものがあったので紹介します。
jQueryを使ったシンプルなコードで画像をフェード
ナビゲーションをフェードで切り替え | kojilow Blog
通常の画像の背景に、cssでオンマウス時の画像を配置。jQueryで画像をフェードさせることで、ロールオーバーを実現しています。こういった動きがひとつ加わるだけで、ロールオーバーにJavaScriptを使う意義を感じますね。
また、画像の下に背景画像を敷くのは、cssのみでロールオーバーを実装する際にも使われる手法ですが、imgタグではなく、それを包括する親要素に背景を設定するのがポイントです。
あと、全然関係ないけど、こちらの作者さんが、僕と同じ栃木県在住っぽいのでドキドキします。
