2010/05/10前にjQueryを利用した画像ロールオーバーのサンプルコードを紹介しました。jQueryで画像ロールオーバーこのサンプルでは、画像切り替えがスムーズではなく、瞬時に画像が差し変わるだけです。それでも特に問題はないのですが、今回は一つ手を加えて、徐々に透過させて切り替える、つまり、フェードイン・フェードアウトを利用してふわっと切り替えるように改良してみました。jQueryのバージョンは1.3.2です。"0");$(this).after(clone);clone.hide();par.hover(function(){$(this).find('.clone').fadeIn(time);},function(){$(this).find('.clone').fadeOut(time);});}});}引数のclassnameは対象となるimgタグのクラス名、prefixはロールオーバー画像のプレフィックス、timeは切り替えるアニメーションの時間です。これを適用する場合には以下のように記述し、ロールオーバー用の画像「sample_o.jpg」を用意します。時間は1000ミリ秒、つまり1秒かけて切り替えます。/></a>処理概要としては、対象の画像の上に、cssで絶対配置を指定したロールオーバー画像を重ねます。その上にかぶせた画像をアルファをきかせながら表示させたり、非表示にしたりしているだけです。今回の処理ではJSでスタイルを書き換えているので、既存のデザインによってはうまく動作しないこともあるかと思います。画像を2枚重ねて、上の画像を消しています。ひとつ、背景画像に入れ込んで、既存画像を消す方法も考えたのですが、どっちがよかったのかな。後者も暇があったら作ってみます。本書は、実践で即役立つテクニックと開発ノウハウ、つまづきやすい・ハマりやすいポイントを徹底解説した「JavaScriptを利用するWebプログラマ必携の逆引き集」です。JavaScript(ECMAScript)の基本構文や新記法といった基礎的な知識から、オブジェクト指向、組み込みオブジェクト、関数、オブジェクト指向構文、DOM、ブラウザーオブジェクトなどの定石・応用テクニック、開発に役立つツール類まで、著者の経験に基づいた実践の場で必ず役立つノウハウ、レシピを提供します。JavaScriptをいまいち使いこなせていないと感じる方や中級レベルに向けてしっかり足場固めをしたい方、JavaScriptをもっと活用したい方などにおすすめの一冊です。アスキー・メディアワークスWeb制作に必要なjQueryの使い方を効率よくしっかり学べる。2.0など最新のトレンドにも対応。サンプルを100本超提供。1.9対応特製チートシート付き。コメントをキャンセルメールアドレスが公開されることはありません。コメントデータの処理方法の詳細はこちらをご覧ください。inc.Profileサイト「helog」は私がWeb制作に携わるなかでの経験を中心に記しています。前にも発生したんだよなぁ。」といった無駄な時間を省くことを目的に書き始めました。「へ」の「ログ」です。個人的な技術メモのようなものですが、みなさんの何か役に立つことがあればこの上ないです。